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

【问题标题】：jquery tabs have to click twice to show divjquery 选项卡必须单击两次才能显示 div
【发布时间】：2014-03-05 23:47:58
【问题描述】：

我有这个 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/

【问题讨论】：

Ps.：$(".tablink").click(function(){ 有错字，.tablink 上有小写的L。
@user13500 很好发现但仍然一无所获 - jsfiddle.net/2SRZE/7
@user3223205 仍然对仅基于window.hash 更改的事件感兴趣？请参阅下面的新答案...

标签： javascript jquery html

【解决方案1】：

FIDDLE

为什么不保持简单，直接从锚链接而不是页面 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');
       }
    });

【讨论】：

这不会在页面刷新时保留选择的 lat 选项卡，这就是为什么我试图在 url 末尾使用 #contacts 等
仍然没有选择
当我点击链接/标签时，它没有将 # 放在 url 的末尾
现在检查.. 删除 e.preventDefault()
太好了 - 唯一的问题是当我单击一个时，它会因为 # 而使页面滚动 - 是否可以停止这个？

【解决方案2】：

关于为什么要点击两次的评论：

当您单击选项卡并触发事件时，窗口的地址仍然没有改变。在第一次点击这将意味着没有哈希。在随后的点击中，这意味着哈希的值是 previous clicked anchor。

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

通过示例更容易。这里的文本框在每次点击时都会更新哈希值。

Fiddle

如您所见，哈希更改为时已晚。

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

【讨论】：

【解决方案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");
           });
       });
   });

【讨论】：

【解决方案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");
});

【讨论】：