Twitter Bootstrap选项卡活动类切换不起作用

Question

我正在使用Twitter bootstrap导航选项卡和导航丸.这是我的HTML代码:

<div class="Header2" style="background-color:#1E3848">
    <div id="headerTab">
        <ul class="nav nav-tabs">
            <li class="active ans-tab"> <a href="http://myweb.com/">Home</a></li>
            <li class="topTab"><a href="http://myweb.com/score/">Score</a></li>
            <li class="topTab"><a href="http://myweb.com/leaderboards/">Leaderboards</a></li>
        </ul>
    </div>
    <div id="subHeaderTabPlayer">
        <ul class="nav nav-pills">
            <li class="active"> <a href="http://myweb.com/">Top</a></li>
            <li><a href="http://myweb.com/rules/" data-toggle="pill">Rules</a></li>
            <li><a href="http://myweb.com/player/" data-toggle="pill">Player</a></li>
            <li><a href="http://myweb.com/categories/" data-toggle="pill">Categories</a></li>
        </ul>
    </div>
</div>

现在,如果我将属性data-toggle="pill"和 data-toggle="tab"活动类更改的选项卡添加到我单击的选项卡中.但是,href不再有效.如果我不使用这些类,则href工作但活动类不会更改,并且它始终保留在页面加载时给出的类的元素.

我甚至尝试使用jQuery来切换类行为,它也不起作用.我的脚本代码是:

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(window).load(function(){
        document.getElementById( 'subHeaderTabPlayer' ).style.display = 'none';
        $('ul.nav-tabs li a').click(function (e) {
            var activeTab= document.getElementByClass('active');
            activeTab.removeAttribute("class");

            $('ul.nav-tabs li.active').removeClass('active')
            $(this).parent('li').addClass('active')
        })
        $('ul.nav-pills li a').click(function (e) {
            $('ul.nav-pills li.active').removeClass('active');
            $(this).parent('li').addClass('active');
        })
        $(".ans-tab").click(function() {
            document.getElementById('subHeaderTabPlayer').style.visibility = 'visible';
            document.getElementById('subHeaderTabPlayer' ).style.display = 'block';
        });
        $(".topTab").click(function() {
            document.getElementById('subHeaderTabPlayer').style.visibility = 'collapse';
            document.getElementById('subHeaderTabPlayer' ).style.display = 'none';
        });
    });
</script>

Answer 1

Bootstrap导航选项卡和补丁使用JS插件.该插件加载在页面上,负责突出显示和记住当前活动的选项卡或药丸.如果它们链接到其他页面,它会禁用href属性,因为当您单击指向另一个页面的链接时,将加载新页面.然后为这个新页面重新加载JS,它不知道哪个tab或pill当前是活动的.它们设计用于单页应用程序或链接到同一页面上的锚点,并且它们可以正常工作.

由于同样的原因,jQuery方法失败了,但可能更容易解释.

$('ul.nav-pills li a').click(function (e) {
  $('ul.nav-pills li.active').removeClass('active')
  $(this).parent('li').addClass('active')
})

你单击一个链接,JS就关闭并更改了类,只有在加载下一页之前有足够的时间才能这样做,这个下一页被加载,因为链接上的href属性告诉浏览器导航到一个新的页.新页面再次加载你的JS,它不可能记住上一页中的变量,比如哪个tab或pill是活跃的.

如果要导航到其他页面,也可以在右侧选项卡上为正在加载的特定页面设置活动类.

如果你真的需要在客户端这样做,你可以做这样的事情,并在每个页面上加载它.

$(document).ready(function () {

  // Set BaseURL
  var baseURL = 'http://myweb.com/'

  // Get current URL and replace baseURL
  var href = window.location.href.replace(baseURL, '');

  // Remove trailing slash
  href = href.substr(-1) == '/' ? href.substr(0, href.length - 1) : href;

  // Get last part of current URL
  var page = href.substr(href.lastIndexOf('/') + 1);

  // Add trailing slash if not empty (empty means we're currently at baseURL)
  page = page != '' ? page + '/' : page;

  // Select link based on href attribute and set it's closest 'li' to 'active'. 
  // .siblings('.active').removeClass() is only needed if you have a default 'active li'.
  $('a[href="' + baseURL + page + '"]', '.nav li').closest('li').addClass('active').siblings('.active').removeClass();

});

它根据URL的最后一部分设置活动选项卡,但它特定于您的场景(以及之前的场景).如果涉及文件扩展名或查询参数,则必须对其进行调整.每个页面至少需要一个自己的链接.并且它最好具有完全相同的标题,其上显示与所有其他页面相同的标签和药丸.

这两个最后一点再次提出了我的想法"如果你必须对页面上正好呈现的内容有这么多的控​​制权,你可能有权访问服务器端",如果是这样的话,你可能会并在那里修复它,因为每个链接都会向服务器发出新的请求.并且您的解决方案不必依赖一些不那么强大的JavaScript来工作.

所以这就是我在一个阶段所做的,你可以改进它,或者实现一个解决方案,你将一些数据发布到下一页并用那里的JavaScript读取(如果你有文件扩展名,那可能会更容易和更强大)查询要处理的字符串).

祝你好运!:)