使用按钮调用内容。 Js问题

这是对问题的跟进

单击Click to show Tab2 ，操作应与单击

Tab 2

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

 $().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; } 

  
 
 
Tab 1
 
Tab 2
 
 
  
 
This is tab 1
 Click to show Tab2 
  
 
This is tab 2
 
  

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; } 

  
 
 
Tab 1
 
Tab 2
 
 
  
 
This is tab 1
 Click to show Tab2 
  
 
This is tab 2
 
  

Answer 2

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

您的代码

Tab 2

更正

Tab 2

试试看

Answer 3

问题是Click to show Tab2不是“tab-title”的子Click to show Tab2 ; 即你的代码正在寻找标签父“.tab-title”，然后是子“标签”：

 .tab-title>label 

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