Question

我使用bootstrap@4.0.0-beta并且我创建了四个nav tab我试着在显示4 navtab后点击某个页面，但是我想显示活动空格按钮后单击页面显示4 navtab，然后单击另一个选项卡激活另一个导航栏，并且不需要激活上一个选项卡按钮。

查看我的代码示例，我的空格按钮始终处于活动状态，请帮助我解决问题。

＆＃13;

/*footer-navtab*/

.footer-tab .tooter-nav-tab {
  padding: 2rem;
  height: 10vh;
  width: 100%;
  margin-left: 0rem;
  background: white;
  border-top: 1px solid #c9cfd9;
  display: inline;
  text-align: center;
}

p.tab-txt {
  font-size: 0.7rem;
}

.footer-tab ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #c9cfd9;
  overflow: hidden;
  background-color: #ffffff;
}

.footer-tab li {
  float: left;
}

.footer-tab .nav-tabs .nav-link.active {
  color: white;
  background-color: #8bb6f3;
  border-color: #ddd #ddd #fff;
}

.footer-tab li a {
  display: block;
  color: #3f5370;
  text-align: center;
  padding: 18px 16px;
  text-decoration: none;
}

.footer-tab li a:hover {
  background-color: #8bb6f3;
  color: white;
}

.footer-tab-img a:hover {
  background-color: #8bb6f3;
  color: white;
}


/*footernavtab*/

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />


<!--footer-tab-section-->
<div class="footer-tab">
  <ul class="nav nav-tabs" role="tablist">
    <li class="img-01 w-25">
      <a href="#">

        <span class="footer-tab-img">
					<img src="/Image/users.png">
					</span>
        <p class="tab-txt">Setting</p>
      </a>
    </li>
    <li class="img-02 w-25">
      <a href="#" class="nav-link active ">
        <span class="footer-tab-img">
						<img src="/Image/personal-card.png">
						</span>
        <p class="tab-txt">Spaces</p>
      </a>
    </li>
    <li class="img-03 w-25">
      <a href="#">

        <span class="footer-tab-img">
							<img src="/Image/book.png">
							</span>
        <p class="tab-txt">Exercises</p>
      </a>
    </li>
    <li class="img-04 w-25">
      <a href="#" class="active">
        <span class="footer-tab-img">
								<img src="/Image/first-aid-kit.png">
								</span>
        <p class="tab-txt">Profile</p>
      </a>
    </li>
  </ul>
</div>
<!--end footer-tab-section-->

＆＃13;

Answer 1

在bootstrap中有一个名为活动的类。 Wich使包含此类的navlink（在此示例中为navlink 4）突出显示。

class="active"

＆＃13;

/*footer-navtab*/

.footer-tab .tooter-nav-tab {
  padding: 2rem;
  height: 10vh;
  width: 100%;
  margin-left: 0rem;
  background: white;
  border-top: 1px solid #c9cfd9;
  display: inline;
  text-align: center;
}

p.tab-txt {
  font-size: 0.7rem;
}

.footer-tab ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #c9cfd9;
  overflow: hidden;
  background-color: #ffffff;
}

.footer-tab li {
  float: left;
}

.footer-tab .nav-tabs .nav-link.active {
  color: white;
  background-color: #8bb6f3;
  border-color: #ddd #ddd #fff;
}

.footer-tab li a {
  display: block;
  color: #3f5370;
  text-align: center;
  padding: 18px 16px;
  text-decoration: none;
}

.footer-tab li a:hover {
  background-color: #8bb6f3;
  color: white;
}

.footer-tab-img a:hover {
  background-color: #8bb6f3;
  color: white;
}


/*footernavtab*/

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />


<!--footer-tab-section-->
<div class="footer-tab">
  <ul class="nav nav-tabs" role="tablist">
    <li class="img-01 w-25">
      <a href="#" class="nav-link  ">
        <span class="footer-tab-img">
						<img src="/Image/personal-card.png">
						</span>
        <p class="tab-txt">Nav1</p>
      </a>
    </li>
    <li class="img-02 w-25">
      <a href="#" class="nav-link  ">
        <span class="footer-tab-img">
						<img src="/Image/personal-card.png">
						</span>
        <p class="tab-txt">Nav2</p>
      </a>
    </li>
    <li class="img-03 w-25">
      <a href="#" class="nav-link  ">
        <span class="footer-tab-img">
						<img src="/Image/personal-card.png">
						</span>
        <p class="tab-txt">Nav3</p>
      </a>
    </li>
    <li class="img-04 w-25">
      <a href="#" class="nav-link active ">
        <span class="footer-tab-img">
						<img src="/Image/personal-card.png">
						</span>
        <p class="tab-txt">Nav4</p>
      </a>
    </li>
  </ul>
</div>
<!--end footer-tab-section-->

＆＃13;

Answer 2

最后，我设法解决了这个问题，但是没有引导程序。遗憾的是，basig bootstrap.js没有此功能会自动将活动状态从一个导航元素移动到另一个导航元素。

我最后使用此JS解决方案来突出显示活动的导航菜单：

https://codepen.io/gearmobile/pen/bByZdG

$( '#topheader .navbar-nav a' ).on( 'click', function () {
$( '#topheader .navbar-nav' ).find( 'li.active' ).removeClass( 'active' );
$( this ).parent( 'li' ).addClass( 'active' );
});

Bootstrap 4导航标签活动标签问题

2 个答案: