1

这是问题的后续行动

单击时<label for="panel2-radio">Click to show Tab2</label>的动作应与单击时相同<li class="tab-title"><label for="panel2-radio">Tab 2</li>

我无法弄清楚我做错了什么。

$().ready(function(){
  $('.tab-title>label').click(function(e){
    e.preventDefault();
    var index = $(this).parent().index();
    $(this).parent().addClass('active')
         .siblings().removeClass('active')
         .parent('ul.tabs').siblings('.tabs-content').children('.content-tab').removeClass('active')
         .eq(index).addClass('active');
  });
})
.vertical-tabs:after {
  content: "";
  display: table;
  clear: both;
}
.vertical-tabs {position: relative;margin-left: 200px;margin-top: 5%;margin-bottom: 5%}
.tabs {
  position: relative;
  float: left;
  width: 200px;
  padding-left: 0;
  margin-top: 220px;
  margin-bottom: 0px;
  margin-left: -200px;
}
.tabs1 {
  position: relative;
  float: left;
  width: 200px;
  padding-left: 0;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -200px;
}
.tabs li {
  position: relative;
  list-style: none;
}
.tabs li:after {
  content: "";
  display: table;
  clear: both;
}
.tabs li label{
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  background-color: #fbfbfb;
  border: 1px solid #ddd;
}
.tabs li.active label {
  z-index: 2;
  background-color: #424b59;
  color: #c2b697;
  border-right: 1px solid white;
}
.tabs-content{margin-left: 25px;}
.tabs-content .content-tab {
  display: none;
  padding: 10px;
}
.tabs-content .content.active{
  display: inline-block;width: 100%;}
.radio,
.content-tab {
  display: none;
}

.radio:checked+.content-tab.active, .content-tab.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vertical-tabs">
  <ul class="tabs vertical" data-tab="">
    <li class="tab-title active"><label for="panel1-radio">Tab 1</li>
    <li class="tab-title"><label for="panel2-radio">Tab 2</li>
  </ul>
  <div class="tabs-content">
    <input type="radio" name="show-panel" id="panel1-radio" class="radio" checked>
    <div class="content-tab active" id="panela1" aria-hidden="false">
      <p>This is tab 1</p>
      <label for="panel2-radio">Click to show Tab2</label>
    </div>
    <input type="radio" name="show-panel" id="panel2-radio" class="radio">
    <div class="content-tab" id="panelb1" aria-hidden="false">
      <p>This is tab 2</p>
    </div>
 </div>

4

3 回答 3

1

只需监听标签的点击事件.content-tab并触发标签事件tab-title，tab2在您的情况下，例如：

$('.content-tab label').click(function(e) {
    $('.tab-title label[for="' + $(this).attr('for') + '"]').click();
});


$(function() {
  $('.tab-title>label').click(function(e) {
    e.preventDefault();
    var index = $(this).parent().index();

    $(this).parent().addClass('active')
      .siblings().removeClass('active')
      .parent('ul.tabs').siblings('.tabs-content').children('.content-tab').removeClass('active')
      .eq(index).addClass('active');
  });

  $('.content-tab label').click(function(e) {
    $('.tab-title label[for="' + $(this).attr('for') + '"]').click();
  });
})
.vertical-tabs:after {
  content: "";
  display: table;
  clear: both;
}

.vertical-tabs {
  position: relative;
  margin-left: 200px;
  margin-top: 5%;
  margin-bottom: 5%
}

.tabs {
  position: relative;
  float: left;
  width: 200px;
  padding-left: 0;
  margin-top: 220px;
  margin-bottom: 0px;
  margin-left: -200px;
}

.tabs1 {
  position: relative;
  float: left;
  width: 200px;
  padding-left: 0;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -200px;
}

.tabs li {
  position: relative;
  list-style: none;
}

.tabs li:after {
  content: "";
  display: table;
  clear: both;
}

.tabs li label {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  background-color: #fbfbfb;
  border: 1px solid #ddd;
}

.tabs li.active label {
  z-index: 2;
  background-color: #424b59;
  color: #c2b697;
  border-right: 1px solid white;
}

.tabs-content {
  margin-left: 25px;
}

.tabs-content .content-tab {
  display: none;
  padding: 10px;
}

.tabs-content .content.active {
  display: inline-block;
  width: 100%;
}

.radio,
.content-tab {
  display: none;
}

.radio:checked+.content-tab.active,
.content-tab.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vertical-tabs">
  <ul class="tabs vertical" data-tab="">
    <li class="tab-title active"><label for="panel1-radio">Tab 1</a></li>
    <li class="tab-title"><label for="panel2-radio">Tab 2</a></li>
  </ul>
  <div class="tabs-content">
    <input type="radio" name="show-panel" id="panel1-radio" class="radio" checked>
    <div class="content-tab active" id="panela1" aria-hidden="false">
      <p>This is tab 1</p>
      <label for="panel2-radio">Click to show Tab2</label>
</div>
<input type="radio" name="show-panel" id="panel2-radio" class="radio">
<div class="content-tab" id="panelb1" aria-hidden="false">
  <p>This is tab 2</p>
</div>
</div>

于 2018-09-27T14:05:49.423 回答
0

您没有正确关闭标签标签。结束 a 不应该在那里。

你的代码 <li class="tab-title"><label for="panel2-radio">Tab 2</a></li>

更正 <li class="tab-title"><label for="panel2-radio">Tab 2</label ></li>

试试看

于 2018-09-27T13:59:58.253 回答
0

问题在于它<label for="panel2-radio">Click to show Tab2</label>不是“标签标题”的孩子；即您的代码正在寻找标签父“.tab-title”，然后是子“标签”：

.tab-title>label

请尝试用带有“tab-title”类的 div 包装这个标签 :-)

于 2018-09-27T14:01:20.913 回答