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

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

下面是一个完整的代码：

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

表1内容
表2内容
$（文档）.ready（函数（）{
if（location.hash）{
//也许在这里再验证一下
setActiveLink（location.hash）；
}
$（'.tabLink'）。单击（函数（e）{
e、 预防默认值（）；
var target=$（this.attr（'href'）；
document.location.hash=目标；
setActiveLink（目标）；
});
函数setActiveLink（目标）{
$（“.tabLink”）.removeClass（“activeLink”）；
$（'a[href='+target+']'）。addClass（“activeLink”）；
$（'.tabcontent'）.addClass（'hide'）；
$（目标）.removeClass（'hide'）；
}
});

关于为什么必须单击两次的注释：

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

页面输入：

hash=''

点击联系人：

hash=''

隐藏内容。（公司被隐藏起来了。）

显示

hash+'-1'

（由于hash为空，因此不匹配。）

事件完成，窗口哈希更改：

hash='#contacts'

点击

#联系人

：

hash=='#联系人'

隐藏内容。（没什么好隐瞒的）

显示

hash+'-1'

：

contacts-1

Show

举例来说更容易。在这里，文本框在每次单击时都会更新为哈希值

正如您所看到的，散列更改太晚了

所以：正如Lucky Soni所指出的，检查目标事件的

href

值。

看看这个：

你也可以看到这一点：

---

注：

$（“.tablink”）上有一个打字错误。单击（函数（）{

，你在

上有小写的
L
。tablink

@user13500很好地找到了，但仍然没有任何东西-@user3223250仍然对完全基于

窗口的事件感兴趣。哈希

更改？请参阅下面我的新答案…这不会保持页面刷新上的lat选定选项卡，这就是为什么我试图在页面结束时使用#联系人等url仍然没有保留它selectedits当我现在单击链接/选项卡检查时没有将#放在url的末尾..删除

e.preventDefault（）

这很好-唯一的问题是当我单击一个链接时，它会因为#而使页面滚动-有可能停止吗？

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

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