Question

我有这个jquery代码：

$(document).ready(function() {
    $(".tabLink").each(function(){
        if(location.hash) {
            $(".tabLink").removeClass("activeLink");
            $(location.hash+"-1").addClass("activeLink");

            $(".tabcontent").addClass("hide")
            $(location.hash+"-1").removeClass("hide")
        } else {
                $(".tablink").click(function(){
                    $(".tabLink").removeClass("activeLink");
                    $(this).addClass("activeLink");

                    $(".tabcontent").addClass("hide")
                    $(location.hash+"-1").removeClass("hide")
                });
        }
    });
});

在标签之间切换，我的html是：

<a href="#companyinfo" class="tabLink activeLink">Company</a> 
<a href="#contacts" class="tabLink">Contacts</a>
<div class="tabcontent" id="companyinfo-1"> 

</div>
<div class="tabcontent" id="contacts-1"> 

</div>

当我选择另一个标签时，我必须单击它两次才能进行div显示

这里是完整代码的小提琴：http://jsfiddle.net/2SRZE/

Answer 1

FIDDLE

为什么不保持简单，直接从锚链接而不是页面网址抓取目标？

<div class="tab-box"> 
    <a href="#companyinfo-1" class="tabLink activeLink">Company</a> 
    <a href="#contacts-1" class="tabLink">Contacts</a>
</div>

<div class="tabcontent" id="companyinfo-1"> 
    Tab 1 Content    
</div>

<div class="tabcontent hide" id="contacts-1"> 
    Tab 2 Content    
</div>


   $(document).ready(function() {
       if(location.hash) {
         // maybe do a little more validation here
         setActiveLink(location.hash);
       }
       $('.tabLink').click(function(e) {
           e.preventDefault();
           var target = $(this).attr('href');
           document.location.hash = target;
           setActiveLink(target);

       });

       function setActiveLink(target) {
           $(".tabLink").removeClass("activeLink");
           $('a[href=' + target + ']').addClass("activeLink");
           $('.tabcontent').addClass('hide');
           $(target).removeClass('hide');
       }
    });

Answer 2

评论您必须点击两次的原因：

单击选项卡并触发事件时，窗口的地址仍未更改。在第一次单击时，这意味着没有哈希。在随后的点击中，这意味着哈希的值为上一个点击的锚点。

页面输入：hash == ''
点击通讯录：hash == ''
隐藏内容。（公司被隐藏。）
显示hash + '-1'（不匹配，因为哈希为空。）
事件已完成，窗口哈希更改：hash == '#contacts'
点击#contacts：hash == '#contacts'
隐藏内容。（没什么可隐瞒的。）
显示hash + '-1'：contacts-1 show。

通过示例更容易。每次点击时，文本框都会使用哈希值进行更新。

Fiddle

如您所见，散列更改太晚。

所以：正如Lucky Soni所述，检查目标事件的href值。

Answer 3

http://jsfiddle.net/awesome/svP3T/2/

   $(document).ready(function () {
       $(".tabcontent").addClass("hide");
       $($(".activeLink").attr('href') + '-1').removeClass("hide");
       $(".tabLink").each(function () {
           var _tabLink = $(this);
           var _tabLinkAttr = $(_tabLink.attr('href') + '-1');
           _tabLink.click(function () {
               $(".tabLink").removeClass("activeLink");
               _tabLink.addClass("activeLink");

               $(".tabcontent").addClass("hide");
               _tabLinkAttr.removeClass("hide");
           });
       });
   });

Answer 4

检查一下：http://jsfiddle.net/awesome/svP3T/4/

另见：$(window) bind hashchange how to check part hash changed?

var originalHash = window.location.hash;

$(document).ready(function () {
    $(window).bind('hashchange', function () {
        // remove all active
        $(".tabLink").removeClass("activeLink");
        $(".tabcontent").addClass("hide");

        // https://stackoverflow.com/questions/7699073/window-bind-hashchange-how-to-check-part-hash-changed
        var newHash = window.location.hash;
        var _origHash = originalHash;
        originalHash = newHash;

        // log
        console.log('original: ' + _origHash);
        console.log('new: ' + newHash);

        // update active
        $('[href="' + newHash + '"]').addClass("activeLink");
        $(newHash + '-1').removeClass("hide");
    });

    // init    
    $(".tabcontent").addClass("hide");
    $($(".activeLink").attr('href') + '-1').removeClass("hide");
});

jquery选项卡必须单击两次才能显示div

4 个答案: