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。

以下是完整代码的示例：http://jsfiddle.net/2SRZE/。

- user3223205

---

Ps.: 在 $(".tablink").click(function(){ 中有一个拼写错误，您在 .tablink 上使用了小写字母 L。 - user13500

@user13500 发现得不错，但仍然没有解决 - http://jsfiddle.net/2SRZE/7/ - user3223205

@user3223205，你还对仅基于window.hash更改的事件感兴趣吗？请看下面我的新回答... - SoAwesomeMan

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

- Lucky Soni

---

这不会在页面刷新时保留上次选择的选项卡，这就是为什么我尝试在URL末尾使用#contacts等的原因。 - user3223205

仍未保持其选中状态。 - user3223205

当我点击链接/选项卡时，它没有在URL末尾放置“＃”。 - user3223205

检查一下..移除e.preventDefault()。 - Lucky Soni

太好了 - 唯一的问题是当我点击其中一个时，由于 # 的原因，页面会滚动 - 是否有可能停止这种情况？ - user3223205

请看这里：https://dev59.com/33I_5IYBdhLWcg3wMf5_ - Lucky Soni

Answer 2

为什么您需要点击两次的注释：

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

1. 页面进入：hash == ''
2. 单击联系人：hash == ''
3. 隐藏内容。（公司被隐藏了。）
4. 显示hash + '-1'（哈希为空，没有匹配项。）
5. 事件完成，窗口哈希值更改：hash == '#contacts'
6. 单击#contacts：hash == '#contacts'
7. 隐藏内容。（没有要隐藏的内容。）
8. 显示hash + '-1'：contacts-1 显示。

通过示例更容易理解。这里每次单击时文本框都会更新哈希值。

Fiddle

正如您所看到的，哈希值更改得太晚了。

因此：如Lucky Soni所指出的那样，请检查目标事件的href值。

- user13500

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

- SoAwesomeMan

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://dev59.com/q1zUa4cB1Zd3GeqPzArq
        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");
});

- SoAwesomeMan