Question

的后续活动

单击<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>

Answer 1

只需监听.content-tab标签的click事件并触发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>

Answer 2

您没有正确关闭标签。结束符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>

尝试

Answer 3

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

.tab-title>label

请尝试使用带有“ tab-title”类的div来包装此标签：-）

使用按钮呼叫内容。期刊

3 个答案: