我正在处理页面加载事件,一个 DIV 将是 display:block
,另外两个被设置为 display:none
。
一旦用户单击按钮查看其中一个隐藏的 DIV,样式将切换,因此隐藏的 DIV 将被设置为 display:block
,另一个将是 display: none
。
我目前正在处理这个问题,但我想看看是否有更有效的方法来解决这个问题。
如有任何建议,我们将不胜感激!
最佳答案
- 将 Common Class 添加到所有选项卡标题
- 添加
data-target
属性以在点击 tab-header 时显示元素 - 将容器内的所有选项卡内容分组
查看 HTML
中突出显示的更改和 Javascript
中的内联注释。
HTML:
<div class="pageTabs">
<div class="tabs">
<span id="overview-btn" class="active tabHeader" data-target="#overview-section">Overview</span>
// ^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<span id="itinerary-btn" class="tabHeader" data-target="#itinerary-section">Full Itinerary</span>
// ^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<span id="map-btn" class="tabHeader" data-target="#map-section">Map</span>
// ^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^
</div>
</div>
<div class="content">
<div class="overview" id="overview-section">
<p>Intro 1</p>
<p>Intro 2</p>
<p>Intro 3</p>
</div>
<div class="itinerary" id="itinerary-section">
<div class="heading">Day 1</div>
<p>blah blah blah</p>
<hr>
<div class="heading">Day 2</div>
<p>blah blah blah</p>
<hr>
<div class="heading">Day 3</div>
<p>blah blah blah</p>
<hr>
<div class="heading">Day 4</div>
<p>blah blah blah</p>
<hr>
<div class="heading">Day 5</div>
<p>blah blah blah</p>
<hr>
</div>
<div class="map" id="map-section">map here...</div>
</div>
Javascript:
$(document).ready(function () {
// When tab-header is clicked
$('.tabHeader').on('click', function () {
// Add active class to the clicked element, and remove from other tab-headings
$(this).addClass('active').siblings().removeClass('active');
// Get the target element show it and hide other tab-contents
$($(this).data('target')).show().siblings().hide();
});
});
关于javascript - jQuery - 显示一个 DIV 并隐藏多个其他,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30846111/