如何为 Bootstrap 3 导航选项卡动态添加“活动”类？答案

【问题标题】：How do I add 'active' class dynamically for Bootstrap 3 nav-tabs?如何为 Bootstrap 3 导航选项卡动态添加“活动”类？
【发布时间】：2015-06-25 04:09:56
【问题描述】：

我正在使用带有母版页的 asp.net Web 表单的 Bootstrap 3。在我的母版页中，我在页面右侧有垂直的nav-tabs，单击按钮时会滑动。在这些个人nav-tabs 中，我有默认的水平引导程序nav-tabs。我的问题是，我想使用 Javascript 动态添加/删除活动类。

在垂直选项卡中，我最初删除了class="active"，并希望在单击它时将其添加到单个垂直导航选项卡中。当我再次点击它时，它应该会恢复到原来的颜色。

这是母版页代码：

<div class="tab-pane tabPanes" id="rightTab1">
    <div>
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#rightTab1_1" aria-controls="home" role="tab" data-toggle="tab">Home</a>
            </li>

            <li role="presentation">
                <a href="#rightTab1_2" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
             </li>
        </ul>
    </div>
</div>

<div class="tab-pane tabPanes" id="rightTab2">
    <div>
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#rightTab2_1" aria-controls="home" role="tab" data-toggle="tab">Home</a>
            </li>

            <li role="presentation">
                <a href="#rightTab2_2" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
            </li>
        </ul>
    </div>
</div>

<div class="row">
    <ul class="nav nav-tabs tabs-right sideways">
        <li id="nav1"><a href="#rightTab1" data-toggle="tab">Tab1</a></li>
        <li id="nav2"><a href="#rightTab2" data-toggle="tab">Tab2</a></li>
    </ul>
</div>

我的 Javascript ：

$(document).ready(function () {
    $("#rightTab1").hide();
    $("#rightTab2").hide();
    $("#rightTab3").hide();

    $("#nav1").click(function () {
        if ($("#rightTab1").is(":hidden") && $("#rightTab2").is(":visible")) {
            $("#rightTab1").delay(1000).show('slide', { direction: 'right' }, 500);
            $("#rightTab2").hide('slide', { direction: 'right' }, 500);
        }

        else if ($("#rightTab1").is(":hidden") && $("#rightTab2").is(":hidden")) {
            $("#rightTab1").show('slide', { direction: 'right' }, 500);
            $("#rightTab2").hide('slide', { direction: 'right' }, 500);
        }

        else {
            $("#rightTab1").hide('slide', { direction: 'right' }, 500);
            $(".sideways li a").removeClass('active');
        }
    });
});

请帮助我。提前致谢。

【问题讨论】：

标签： javascript asp.net twitter-bootstrap-3

【解决方案1】：

在点击中使用href，它会很好看这个例子不需要自己写jquery

$('[data-toggle^=pill]').click(function(e) {


  if ($(this).parent().hasClass('active')) {
    console.log($(this).parent().removeClass('active'))
    console.log($($(this).attr('href')).removeClass('in active'))

  } else {
    $('[data-toggle^=pill]').parent().removeClass('active')
    $('[class^=tab-pane]').removeClass('in active') 

    console.log($(this).parent().addClass('active'))
    console.log($($(this).attr('href')).addClass('in active'))
  }

  e.stopPropagation();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Dynamic Pills</h2>
    <ul class="nav nav-pills">
      <li><a data-toggle="pill" href="#home">Home</a>
      </li>
      <li><a data-toggle="pill" href="#menu1">Menu 1</a>
      </li>
      <li><a data-toggle="pill" href="#menu2">Menu 2</a>
      </li>
      <li><a data-toggle="pill" href="#menu3">Menu 3</a>
      </li>
    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane fade">
        <h3>HOME</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="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>
      <div id="menu3" class="tab-pane fade">
        <h3>Menu 3</h3>
        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>

</body>

</html>

【讨论】：

我需要所有选项卡最初都处于非活动状态。然后当我单击选项卡时，需要显示选项卡的内容。当我再次单击同一选项卡时，我希望该选项卡的内容消失并且该选项卡再次处于非活动状态。
嗨 @ProblemChild 我编辑 sn-p 如果我做错了什么，请告诉我：D

【解决方案2】：

如果 ContentPlaceHolder1

#rightTab1_1 to #ContentPlaceHolder1_rightTab1_1

#rightTab1_2 to #ContentPlaceHolder1_rightTab1_2

【讨论】：

你需要添加一个解释。完全不清楚这是什么。