我正在处理页面加载事件,一个 DIV 将是
display:block
,另外两个设置为 display:none
。
一旦用户单击按钮查看其中一个隐藏的 DIV,样式就会切换,因此隐藏的 DIV 将设置为
display:block
,另一个将设置为 display: none
。
我目前正在进行这项工作,但我想看看是否有更有效的方法来解决这个问题。
如有任何建议,我们将不胜感激!
data-target
属性以在单击选项卡标题时显示元素查看
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();
});
});
将所有 css 更改放入 css 文件中的类中,并在 Jquery 脚本中使用
.addClass('yourclass')
(不要忘记加载 css 文件)。
对于 .css("display", "none") 使用 Jquery
.hide()
带/不带 .toggle()
向所有单独的选项卡添加了类别选项卡。
注意:将它们从跨度更改为按钮,因为它们是可点击元素,并且可以通过这种方式获得键盘焦点。
还添加了一个数据属性,其中包含相应内容部分的 id。
在每个内容部分添加了课程内容部分。
<div class="pageTabs">
<div class="tabs">
<button id="overview-btn" class="active tab" data-content="overview-section">Overview</button>
<button id="itinerary-btn" class="tab" data-content="itinerary-section">Full Itinerary</button>
<button id="map-btn" class="tab" data-content="map-section">Map</button>
</div>
</div>
<div class="content">
<div class="overview content-section selected" id="overview-section">
<p>Intro 1</p>
<p>Intro 2</p>
<p>Intro 3</p>
</div>
<div class="itinerary content-section" 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 content-section" id="map-section">
map here...
</div>
</div>
添加了以下 jquery 代码:
jQuery(document).ready(function(){
$('.tab').on('click',function() {
var $this = $(this);
var selectedContentId = '#' + $this.data('content');
$('.tab').removeClass('active');
$this.addClass('active');
$('.content-section').removeClass('selected');
$(selectedContentId).addClass('selected');
});
});
您应该执行以下操作来优化您的代码。
然后使用以下代码
jQuery(document).ready(function(){
jQuery('.tabs span').click(function(){
//First remove the class 'active' from the .tabs of all spans
jQuery('.tabs span').removeClass('active');
// We will make only the clicked one active (color pink)
jQuery(this).addClass('active');
//hide all the .overview class
jQuery('.overview').hide();
//then only the clicked tabs "id"-section
jQuery('#'+jQuery(this).attr('id')+"-section").show();
});
//initial setting
jQuery('.overview').hide();
jQuery('#overview-section').show();
});
.pageTabs .tabs span {background-color: #797979; color: #fff!important; cursor: pointer; display: inline-block; font-size: 12px; line-height: 30px; margin: 0!important; padding: 0 12px; text-decoration: none;}
.active {background-color: #e10981!important;}
.content {margin: 10px 0 0 0;}
.overview {display: block;}
.overview .itineraryTable {width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; width: 100%; background-color: #58595b; color: #58595b;}
.overview .itineraryTable .titleRow {background-color: #e10981!important; border: 1px solid #e10981!important; color: #fff; font-size: 14px; padding: 4px; text-align: left;}
.overview .itineraryTable th {color: inherit; background-color: #fff; width: 15%; border: 1px solid #bcbec0; text-align: left; padding: 4px;}
.overview .itineraryTable td {border: 1px solid #bcbec0; background-color: #fff; color: #797979; padding: 4px; width: 95%;}
.itinerary {display: none;}
.itinerary .heading {color: #e10981!important; font-size: 14px; line-height: 14px;}
.itinerary p {color: #797979; font-size: 12px; line-height: 16px; margin: 10px 0; text-align: justify;}
.itinerary hr {background-color: #bcbec0; border: medium none; height: 1px; margin: 15px 0;}
.map {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="pageTabs">
<div class="tabs">
<span id="overview" class="active">Overview</span>
<span id="itinerary">Full Itinerary</span>
<span id="map">Map</span>
</div>
</div>
<div class="content">
<div class="overview" id="overview-section" style="display:block;">
<p>Intro 1</p>
<p>Intro 2</p>
<p>Intro 3</p>
</div>
</div>
<div class="overview" 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="overview" id="map-section">
map here...
</div>
如果这解决了您的问题,请告诉我