对所有选项卡使用一个jQuery代码 [英] Use one jquery code for all tabs
本文介绍了对所有选项卡使用一个jQuery代码的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要帮助.我在网站上有6个标签.但是,当我单击选项卡之一时,所有其他选项卡也会更改.我如何为每个标签都具有唯一性ID?请帮忙.这是我的代码:
I need help. I have 6 tabs on website. But when i`m clicking to one of the tab, all other tabs changes too. How i can to have unigue id for every tab ? Please help. This my codes:
jQuery(document).ready(function () {
// When user clicks on tab, this code will be executed
jQuery("#tabs li").click(function () {
// First remove class "active" from currently active tab
jQuery("#tabs li").removeClass('active');
// Now add class "active" to the selected/clicked tab
jQuery(this).addClass("active");
// Hide all tab content
jQuery(".tab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = jQuery(this).find("a").attr("href");
// Show the selected tab content
jQuery(selected_tab).fadeIn();
// At the end, we add return false so that the click on the link is not executed
return false;
});
});
这是我的html-CSS:
This is my html - css:
<style type="text/css" >
#tabs_container {
border-bottom: 1px solid #ccc;
}
#tabs {
list-style: none;
padding: 5px 0 4px 0;
margin: 0 0 0 10px;
font: 1.5em arial;
}
#tabs li {
display: inline;
}
#tabs li a {
border: 1px solid #ccc;
padding: 4px 6px;
text-decoration: none;
background-color: #eeeeee;
border-bottom: none;
outline: none;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
}
#tabs li a:hover {
background-color: #dddddd;
padding: 4px 6px;
}
#tabs li.active a {
border-bottom: 1px solid #fff;
background-color: #fff;
padding: 4px 6px 5px 6px;
border-bottom: none;
}
#tabs li.active a:hover {
background-color: #eeeeee;
padding: 4px 6px 5px 6px;
border-bottom: none;
}
#tabs li a.icon_accept {
background: #c3c3c3;
background-position: 5px;
background-repeat: no-repeat;
padding-left: 24px;
}
#tabs li a.icon_accept:hover {
padding-left: 24px;
}
#tabs_content_container {
border: 1px solid #ccc;
border-top: none;
padding: 10px;
}
.tab_content {
display: none;
}
#tabs_display {
display:table;
}
</style>
<!-- This is the box that all of the tabs and contents of
the tabs will reside -->
<div id="tabs_container">
<ul id="tabs">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a class="icon_accept" href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
</div>
<div id="tabs_content_container">
<div id="tab1" class="tab_content" style="display: block;">
<p> tab content 1 </p>
</div>
<div id="tab2" class="tab_content">
<p>This tab has icon in it.</p>
</div>
<div id="tab3" class="tab_content">
<p>Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p>
</div>
</div>
推荐答案
我在项目中使用了这种方式.试试这个:
I use that way in my projects. Try this:
// Javascript Part:
$(document).ready(function() {
function switch_tabs($obj){
// hide tab contents
$('.tab_content').hide();
// deactivate currenct tab
$('.tab_links a').removeClass('active');
// activate tab and show content
var id = $obj.attr('href');
$(id).show();
$obj.addClass('active');
}
$('.Tabs a').click(function(){
switch_tabs($(this));
return false;
});
switch_tabs($('.Tabs a.active'));
});
// HTML Part:
<div class="Tabs">
<ul class="tab_links">
<li><a href="#Logs" class="active">Logs</a></li>
<li><a href="#Sessions">Sessions</a></li>
</ul>
<!-- Logs (tab) -->
<div id="Logs" class="tab_content">
LOGS CONTENT HERE
</div>
<div id="Sessions" class="tab_content">
SESSIONS CONTENT HERE
</div>
</div>
// CSS Part:
.Tabs { }
.Tabs ul.tab_links { margin:0 0 0 10px; padding:0; list-style:none; }
.Tabs ul.tab_links li { float:left; font-size:.75em; margin:0 0 -1px 5px; line-height:1.2em; border:1px solid #BBB;
background-color:#DDD; }
.Tabs ul.tab_links a { display:block; color:#666; width:100%; height:100%; padding:2px 10px; text-decoration:none; }
.Tabs ul.tab_links a.active {color:#BF3723; font-weight:bold; border-color:#AAA; border-bottom-color:#FFF; }
.Tabs div.tab_content { clear:left; padding:15px; border:1px solid #BBB; }
我希望这会有所帮助.
这篇关于对所有选项卡使用一个jQuery代码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文