Question

我有一个bootstrap ul和li，如下所示：

<ul class="nav nav-pills">
    <li><a data-toggle="pill" href="#Tab1">Tab1</a></li>
    <li><a data-toggle="pill" href="#Tab2">Tab2</a></li>
    <li><a data-toggle="pill" href="#Tab3">Tab3</a></li>
</ul>

但唯一的问题是，在加载页面时，默认情况下它不会显示Tab1。我想将Tab1显示为彩色。有没有办法实现这个目标？

提前致谢。

干杯！

Answer 1

只需将 active 课程放在您要在页面加载时显示的 li 上

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">Home</div>
  <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
  <div role="tabpanel" class="tab-pane" id="messages">Message</div>
  <div role="tabpanel" class="tab-pane" id="settings">Settings</div>
</div>

＆＃13;

Answer 2

你可以把类激活到li你想要设置默认值。例如：

<ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" href="#Tab1">Tab1</a></li>
    <li><a data-toggle="pill" href="#Tab2">Tab2</a></li>
    <li><a data-toggle="pill" href="#Tab3">Tab3</a></li>
</ul>

Answer 3

试试这个

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="/home">Home</a></li>
  <li role="presentation"><a href="/profile">Profile</a></li>
  <li role="presentation"><a href="/message">Messages</a></li>
</ul>

＆＃13;

默认情况下显示bootstrap药丸有效

3 个答案: