我希望在单个html页面中有多个选项卡，但我的代码不起作用

Question

<ul class="tabs-nav">
    <li><a href="#tab-1">Tab1</a></li>
    <li><a href="#tab-2">Tab2</a></li>
</ul>
<div class="tabs-stage">
    <div id="tab-1">
        <p>Tab1 contents</p>
    </div>
    <div id="tab-2">
        <p>Tab2 Contents</p>
    </div>
</div>

上面是我的单个页面中多个标签的html代码（此处为2）。下面是我的jquery代码。

$('.tabs-stage div:first').show();
$('.tabs-nav li:first').addClass('tab-active');


$('.tabs-nav a').on('click', function(event) {
    $('.tabs-nav li').removeClass('tab-active');
    $(this).parent().addClass('tab-active');
    $('.tabs-stage div').hide();
    $(this).show();
});

这是用于在单个页面中的多个选项卡之间切换的jquery代码。

Answer 1

你显示错误的元素。使用$($(this).attr('href')).show();显示有效标签。

$(document).ready(function() {
  $('.tabs-stage div:first').show();
  $('.tabs-nav li:first').addClass('tab-active');


  $('.tabs-nav a').on('click', function(event) {
    event.preventDefault();
    $('.tabs-nav li').removeClass('tab-active');
    $(this).parent().addClass('tab-active');
    $('.tabs-stage div').hide();
    $($(this).attr('href')).show();
  });
});

.tabs-nav li {
  display: inline-block;
  border: 1px solid #ddd;
  border-bottom: 2px solid #ddd;
}
a {
  padding: 3px 10px;
  text-decoration: none;
  color: #455;
}
.tabs-nav li.tab-active {
  border-bottom-color: red;
}
.tabs-stage > div {
  display: none;
  border: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs-nav">
  <li><a href="#tab-1">Tab1</a>
  </li>
  <li><a href="#tab-2">Tab2</a>
  </li>
</ul>
<div class="tabs-stage">
  <div id="tab-1">
    <p>Tab1 contents</p>
  </div>
  <div id="tab-2">
    <p>Tab2 Contents</p>
  </div>
</div>

Answer 2

尝试引导标签菜单

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个

// Hide all the tabs except the first one by default
$('.tabs-stage div').not(':first').hide();
$('.tabs-nav li:first').addClass('tab-active');


$('.tabs-nav a').on('click', function(event) {
  // Add class
  $('.tabs-nav li').removeClass('tab-active');
  $(this).parent().addClass('tab-active');
  
  $('.tabs-stage div').hide();
  $('.tabs-stage div').eq($(this).parent().index()).show();
});

.tabs-nav {
  padding: 0;
  margin: 0 auto;
  width: 70%;
  text-align: center;
}

.tabs-nav li {
  display: inline-block;
  padding: 10px;
  background: #aaa;
}

.tabs-nav li.tab-active {
  background: black;
}

.tabs-nav li a {
  text-decoration: none;
  color: white;
}

.tabs-stage {
  border-top: 1px solid black;
  margin: 20px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs-nav">
  <li><a href="#tab-1">Tab1</a></li>
  <li><a href="#tab-2">Tab2</a></li>
  <li><a href="#tab-3">Tab3</a></li>
  <li><a href="#tab-4">Tab4</a></li>
  <li><a href="#tab-5">Tab5</a></li>
</ul>
<div class="tabs-stage">
  <div id="tab-1">
    <p>Tab1 contents</p>
  </div>
  <div id="tab-2">
    <p>Tab2 Contents</p>
  </div>
  <div id="tab-3">
    <p>Tab3 Contents</p>
  </div>
  <div id="tab-4">
    <p>Tab4 Contents</p>
  </div>
  <div id="tab-5">
    <p>Tab5 Contents</p>
  </div>
</div>