Question

我尝试建立一个网站，当选择了一个引导程序选项卡时，它会像其ID名称一样显示。但选择该标签后，无法将其设置为活动状态。所以我认为我可以在选择时使自定义活动类跨越。因此，如何在选择时自定义标签。可能就像在选择时更改跨度bg颜色

我的引导程序代码，像这样的东西

<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
    <span data-toggle="pill" href="#lorem" class="btn btn-lg btn-default team-name">Lorem</span>
    <span data-toggle="pill" href="#ipsum" class="btn btn-lg btn-default team-name">Ipsum</span>
</div>

<div class="tab-content">
    <div id="lorem" class="tab-pane fade in active">
        <div class="text-center head-text">
            <h3>Lorem</h3>
        </div>
    </div>
    <div id="ipsum" class="tab-pane fade">
        <div class="text-center head-text">
            <h3>ipsum</h3>
        </div>
    </div>
</div>

Answer 1

您可以使用span代替li。只有这样，引导程序才能将active类添加到活动药丸中。

要设置样式，还必须覆盖引导程序的默认样式。因此，将id放到药丸盒中，然后可以覆盖所需的样式。

供参考https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pills_dynamic&stacked=h

#pills li.active>a{
background:red;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
<div id= "pills" class="container">

  <ul class="nav nav-pills">
    <li class="active"><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 in active">
      <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>

编辑

引导程序仅识别li用于药丸之间的导航。从他们的代码https://github.com/twbs/bootstrap/blob/a5d48323a2bb4600fe6d53b5a881e1386e46e9ce/js/src/tab.js#L45

查看此行

如果必须使用span，则必须对此文件进行更改，这是不可取的。您仍然可以根据需要设置li的样式。

Answer 2

我想你想要这样：-

$('.tabsBtn').on('click', '.btn', function(){
	$('.tabsBtn .btn').removeClass('activeClass');
	$(this).addClass('activeClass');
});

.activeClass{ background:green !important; color:#fff !important;}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6 tabsBtn">
    <span data-toggle="pill" href="#lorem" class="btn btn-lg btn-default team-name">Lorem</span>
    <span data-toggle="pill" href="#ipsum" class="btn btn-lg btn-default team-name">Ipsum</span>
</div>

<div class="tab-content">
    <div id="lorem" class="tab-pane fade in active">
        <div class="text-center head-text">
            <h3>Lorem</h3>
        </div>
    </div>
    <div id="ipsum" class="tab-pane fade">
        <div class="text-center head-text">
            <h3>ipsum</h3>
        </div>
    </div>
</div>

Answer 3

在javascript / jQuery部分中，您可以添加一个可单击的活动类，然后使用CSS添加样式

jQuery('.team-name').on('click',function(){
    jQuery(this).addClass('active');
    jQuery(this).siblings().removeClass('active');
}

在CSS中

team-name.active{
    background-color:#efefef;
}

激活时如何自定义引导程序选项卡？

3 个答案: