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

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 显示

这里有完整代码的 fiddle :http://jsfiddle.net/2SRZE/

Answer 1

FIDDLE

为什么不保持简单并直接从 anchor 链接而不是页面 URL 获取目标？

<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');
       }
    });