1

我已经为此苦苦挣扎了几天，我想我会把它放在那里，看看是否有人可以提供帮助。我有一个 MVC4 应用程序，我正在使用 JQuery 选项卡作为菜单。我通过将部分视图返回到选项卡来实现这一点。问题是我没有浏览器历史记录，也没有维护 MVC RESTful 页面“{controller}/{action}/{id}” 谁能帮我弄清楚是否有办法根据什么来更改 URL选项卡被点击？

<div id="tabs">
<ul>
    <li>@Html.ActionLink("Household Info", "Info", "HouseholdFees", null, new { title = "HouseholdInfo" })</li>
    <li>@Html.ActionLink("Household Management", "Management", "HouseholdFees", null, new { title = "HouseholdManagement" })</li>
    <li>@Html.ActionLink("Household Approval", "Approval", "HouseholdFees", null, new { title = "HouseholdApproval" })</li>
    <li>@Html.ActionLink("Household Administration", "Index", "HouseholdFeesAdministration", null, new { title = "HouseholdAdministration" })</li>
</ul>
</div>

和

            $("#tabs").tabs({
                cache: false,
                spinner: 'Loading task...',
                beforeLoad: function(event, ui) {
                    ui.jqXHR.error(function() {
                        ui.panel.html(
                            "Loading...");
                    });
                },
                collapsible: false
            });
4

2 回答 2

0

您可以使用 JavaScript 作为锚/散列解决方案来做到这一点，就像这样。首先，在选择选项卡时更改 URL 的哈希值。

$("#tabs").bind("tabsselect", function (event, ui) {
    window.location.hash = ui.tab.hash;
});

创建一个对当前哈希做出反应的函数：

function setCurrentTabFromHash() {
    $("#tabs").tabs("select", window.location.hash);
}

从以下位置调用该函数：

$(document).ready(function () {
    setCurrentTabFromHash();
});

和：

$(window).hashchange(function(){
    setCurrentTabFromHash();
});

或者，您可以为异步浏览器历史集成 Ben Alman 的精彩 BBQ 插件，如下所示：

http://benalman.com/projects/jquery-hashchange-plugin/

我希望这会有所帮助，并祝你的应用程序好运！

于 2013-08-06T18:26:54.117 回答
-1

这不是一个真正的答案它更多的是对JS Tabs的使用的误解。我最终没有使用 JS Tabs 组件，因为我认为我在尝试创建菜单时滥用它们，但我确实喜欢它们的外观和感觉，所以我创建了一个新的 JS 类，它动态添加了 JS 的样式TABS 组件添加到我自己的菜单中。我丢失了所有 ajax 位和缓存等...但我认为这是满足我需求的更好解决方案。

JS 扩展：

(function ($) {
$.fn.tabmenu = function() {

    // Plugin code
    return this.each(function() {
        $(this).addClass("ui-tabs ui-widget ui-widget-content ui-corner-all");
        $(this).find("ul").addClass("ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all");
        $(this).find("li").addClass("ui-state-default ui-corner-top")
            .bind('mouseenter', function () {
                $(this).addClass("ui-state-hover");
            })
            .bind('mouseout', function() {
                $(this).removeClass("ui-state-hover");
            });
        $(this).find("#main").addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
        $(this).find("a").addClass("ui-tabs-anchor");

        var parts = window.location.pathname.split("/");

        for (i = 0; i < parts.length; i++) {
            $("a[title*='" + parts[i] + "']").parent().addClass("ui-tabs-active ui-state-active");
        }
    });
};
})(jQuery);

在我的 MVC LAYOUT 页​​面中，我添加了以下代码。

    <script>
        $(function() {
            $("#tabsmenu").tabmenu();
        });
    </script>


            <div id="tabsmenu">
                <ul>
                    <li>@Html.ActionLink("Household Info", "Info", "HouseholdFees", null, new {title = "HouseholdInfo"})</li>
                    <li>@Html.ActionLink("Household Management", "Management", "HouseholdFees", null, new {title = "HouseholdManagement"})</li>
                    <li>@Html.ActionLink("Household Approval", "Approval", "HouseholdFees", null, new {title = "HouseholdApproval"})</li>
                    <li>@Html.ActionLink("Household Administration", "Index", "Administration", null, new {title = "HouseholdAdministration"})</li>
                </ul>


                <div id ="main">
                    @RenderBody()
                </div>

            </div>
于 2013-08-07T12:45:29.997 回答