单击

时间:2017-10-26 13:37:25

标签: jquery wordpress twitter-bootstrap tabs

我似乎无法在我的网站上正常工作。 http://mysocalled90sband.com/test

当页面加载时,我可以看到第一个标签下的内容,但是当我切换到第二个标签时,所有内容都会消失。切换回第一个选项卡直到重新加载才显示内容。

此代码似乎适用于其他地方,因此我认为它必须是在我的网站上无法正确加载的内容。 jQuery似乎正在加载(通过WordPress),因此是bootstrap js文件(3.3.7)。使用自定义脚本文件和各种插件的平滑滚动在主页上使用jQuery。我已经尝试停用在网站的其他页面上运行的插件,但没有运气。有什么想法吗?

<ul class="nav nav-tabs nav-justified">
  <li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="menu1" class="tab-pane fade in active">
    <h3>Menu 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

1 个答案:

答案 0 :(得分:1)

@RajanBeipuri带领我解决了问题。谢谢。

我有一个自定义脚本,允许在主页上的主导航上平滑滚动。

function scrollNav() {
  $('.nav a').click(function(){  
    //Toggle Class
    $(".active").removeClass("active");      
    $(this).closest('li').addClass("active");
    var theClass = $(this).attr("class");
    $('.'+theClass).parent('li').addClass('active');
    //Animate
    $('html, body').stop().animate({
        scrollTop: $( $(this).attr('href') ).offset().top - 115
    }, 1000);
    return false;
  });
  $('.scrollTop a').scrollTop();
}
scrollNav();

此脚本干扰了标签,因为它们也在导航类中。解决方案是在网站的主导航中添加一个类,并相应地调整上面的脚本。