Question

当我用URL打开jQuery选项卡时，它第一次工作。当我尝试使用其他链接（第1页，第2页或第3页）时，它不再起作用。我哪里错了？

这是我的HTML索引页面：

    <a href="index.html#one">Page 1</a>
    <a href="index.html#two">Page 2</a>
    <a href="index.html#three">Page 3</a>
<div>
   <ul class="tabs">
        <li><a href="#one">Tab number 1</a></li>
        <li><a href="#two">Tab number 2</a></li>
        <li><a href="#three">Tab number 3</a></li>
   </ul>
</div>

<div>
    <div id="one" class="tab_content"><p>Page number 1</p></div>
    <div id="two" class="tab_content"><p>Page number 2</p></div>
    <div id="three" class="tab_content"><p>Page number 3</p></div>
</div>

这是我的JS代码：

$(".tab_content").hide(); 
$("ul.tabs li:first").addClass("active").show(); 
$(".tab_content:first").show(); //Show first tab content 


$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); 
    $(this).addClass("active"); 
    $(".tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn(); 
    return false;
});

hash = window.location.hash;
elements = $('a[href="' + hash + '"]');
if (elements.length === 0) {
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").show(); 
} else {
    elements.click();
}

Answer 1

在onhashchange处理程序中设置逻辑：

$(window).on('hashchange', function(){
    var hash = window.location.hash;
    // following code here
});

如果第一次没有粘贴哈希，但仍然需要触发此事件，那么只需在onload事件上绑定它：

$(window).on('load hashchange', handler);

Answer 2

按照以下代码对代码进行更改：

<ul class="nav nav-tabs margin-top">
    <li class="active"><a href="#one" data-toggle="tab">Tab1</a></li>
    <li><a href="#two" data-toggle="tab">Tab2</a></li>
    <li><a href="#three" data-toggle="tab">Tab3</a></li>           
</ul>
<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="one">
        Page number 1
    </div>
    <div class="tab-pane" id="two">
        Page number 2
    </div>
    <div class="tab-pane" id="three">
        Page number 3
    </div>           
</div>

Answer 3

你可以通过以下方式实现：

    <ul id="myTab" class="nav nav-tabs">
                    <li class="active">
                        <asp:HyperLink runat="server" ID="lnkPersonalInfo" NavigateUrl="#PersonalInfo" data-toggle="tab">Personal Info</asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink runat="server" ID="lnkEmploymentInfo" NavigateUrl="#EmploymentInfo"
                            data-toggle="tab">Employment Info</asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink runat="server" ID="lnkProjectInfo" NavigateUrl="#ProjectInfo" data-toggle="tab"> Project Info</asp:HyperLink>
                    </li>                    
    </ul>
    <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active " id="PersonalInfo">                       
                    </div>
                    <div class="tab-pane fade" id="EmploymentInfo">                       
                    </div>
                    <div class="tab-pane fade" id="ProjectInfo">                       
                    </div>
    </div>

    <script type="text/javascript">
        $(function () {
            // cache the id
            var navbox = $('#myTab');
            // activate tab on click
            navbox.on('click', 'a', function (e) {
                var $this = $(this);

                // prevent the Default behavior
                e.preventDefault();
                $("#<%= hdnTab.ClientID %>").val($this.attr('href'));
                window.location.hash = $("#<%= hdnTab.ClientID %>").val();
            });
            window.location.hash = $("#<%= hdnTab.ClientID %>").val();
            var activetab = $("#<%= hdnTab.ClientID %>").val();
            activetab = activetab.substring(1);

            $('a[href$="#PersonalInfo"]').closest("li").removeClass("active");
            $('a[href$="' + $("#<%= hdnTab.ClientID %>").val() + '"]').closest("li").addClass("active");

            $("#PersonalInfo").removeClass("in active");
            $("#" + activetab).addClass("in active");        
        })
    </script>

仅在第一次使用URL打开jQuery选项卡

3 个答案: