[英]Show dynamic content based on clicked tab
I am trying to display content for a particular tab dynamically.我正在尝试动态显示特定选项卡的内容。
If a particular navigation tab is clicked it has to show the respective contents on the right.如果单击特定导航选项卡,则必须在右侧显示相应的内容。
Currently, it's showing all the tab information together.目前,它正在一起显示所有选项卡信息。 Is there a way this can be handled using jquery/js.
有没有办法可以使用 jquery/js.
Tab:标签:
<div class="ibm-tab-section">
<ul class="ibm-tabs" role="tablist">
<li><a aria-selected="true" role="tab" href="#example2b-tab1">Example 2b Tab 1</a></li>
<li><a role="tab" href="#example2b-tab2">Example 2b Tab 2</a></li>
<li><a role="tab" href="#example2b-tab3">Example 2b Tab 3</a></li>
<li><a role="tab" href="#example2b-tab4">Example 2b Tab 4</a></li>
</ul>
</div>
Tab 1 content:选项卡 1 内容:
<div id="example2b-tab1" class="ibm-tabs-content">
<p>Example 2b Tab 1 contents</p>
</div>
Tab 2 content:选项卡 2 内容:
<div id="example2b-tab2" class="ibm-tabs-content">
<p>Example 2b Tab 2 contents</p>
<form>
<p>
<select>
<option value="">Select one</option>
<option value="1">Mr.</option>
<option value="1">Mrs.</option>
<option value="1">Dude</option>
</select>
</p>
</form>
</div>
.ibm-tabs-content
elements using CSS.ibm-tabs-content
元素a
element, hide .ibm-tabs-content
element and show the respective content element on the basis of href
attribute that is mapped.a
元素时,隐藏.ibm-tabs-content
元素并根据映射的href
属性显示相应的内容元素。 $(function() { $("#example2b-tab1").show(); }); $('.ibm-tabs li a').on('click', function(e) { e.preventDefault(); $('.ibm-tabs-content').hide(); let IDSelector = $(this).attr('href'); $(IDSelector).show(); })
.ibm-tabs-content { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="ibm-tab-section"> <ul class="ibm-tabs" role="tablist"> <li><a aria-selected="true" role="tab" href="#example2b-tab1">Example 2b Tab 1</a></li> <li><a role="tab" href="#example2b-tab2">Example 2b Tab 2</a></li> <li><a role="tab" href="#example2b-tab3">Example 2b Tab 3</a></li> <li><a role="tab" href="#example2b-tab4">Example 2b Tab 4</a></li> </ul> </div> <div id="example2b-tab1" class="ibm-tabs-content"> <p>Example 2b Tab 1 contents</p> </div> <div id="example2b-tab2" class="ibm-tabs-content"> <p>Example 2b Tab 2 contents</p> <form> <p> <select> <option value="">Select one</option> <option value="1">Mr.</option> <option value="1">Mrs.</option> <option value="1">Dude</option> </select> </p> </form> </div>
You can hide and show the content of different tabs on click on the tabs using jquery and javascript by using the style property of display and making it as none.您可以使用 jquery 和 javascript 通过使用 display 的 style 属性并将其设置为 none 来隐藏和显示不同选项卡的内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.