JavaScript Tabs - 2 Instances On One Page
I'm using this JavaScript tabbed script:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/comment-page-2/#comments
I have it working 100% if I'm using 1 set of tabs on a page, but I want to add a second set.(It's possible with this script, as per the "A More Complex Script" section in the tutorial.)
When I add a second set, the top tabs work ok, however the bottom set don't work when I click on them and in fact they change the top tabs.
Here's a link to what happens: http://www.europefiles.com/
any help appreciated. thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Tabbed Structure - Regular</title>
<script language="javascript" type="text/javascript">
function tabSwitch(new_tab, new_content) {
document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById(new_tab).className = 'active';
}
function tabSwitch_2(active, number, tab_prefix, content_prefix) {
for (var i=1; i < number+1; i++) {
document.getElementById(content_prefix+i).style.display = 'none';
document.getElementById(tab_prefix+i).className = '';
}
document.getElementById(content_prefix+active).style.display = 'block';
document.getElementById(tab_prefix+active).className = 'active';
}
</script>
<style type="text/css">
#wrapper {position: relative;margin: 0 auto;width: 980px;height: 800px;}
#top {width: 980px;height: 400px;padding:0;margin:0px;color: #333;background: #fff;padding:0;}
#bottom {width: 980px;height: 400px;float:left;padding:0;margin:0;color:#333;background: #fff;padding:0;}
#tabbed_box {margin: 0px auto 0px auto; width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none; font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;text-transform:uppercase;border:1px solid #464c54;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;}
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;}
#content_2, #content_3 { display:n开发者_运维百科one; }
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px; font-size:13px;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li:last-child {border-bottom:none;}
ul.tabs li a {background-image:url(images/tab_off.jpg);background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a.active {background-image:url(images/tab_on.jpg); background-repeat:repeat-x;background-position:top;}
.content {background-image:url(images/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:tabSwitch_2(1, 3, 'tab_', 'content_');" id="tab_1" class="active">Topics</a></li>
<li><a href="javascript:tabSwitch_2(2, 3, 'tab_', 'content_');" id="tab_2">Archives</a></li>
<li><a href="javascript:tabSwitch_2(3, 3, 'tab_', 'content_');" id="tab_3">Pages</a></li>
</ul>
<div id="content_1" class="content">
<ul>
<li><a href="">HTML Techniques <small>4 Posts</small></a></li>
<li><a href="">CSS Styling <small>32 Posts</small></a></li>
<li><a href="">Flash Tutorials <small>2 Posts</small></a></li>
<li><a href="">Web Miscellanea <small>19 Posts</small></a></li>
<li><a href="">Site News <small>6 Posts</small></a></li>
<li><a href="">Web Development <small>8 Posts</small></a></li>
</ul>
</div>
<div id="content_2" class="content">
<ul>
<li><a href="">December 2008 <small>6 Posts</small></a></li>
<li><a href="">November 2008 <small>4 Posts</small></a></li>
<li><a href="">October 2008 <small>22 Posts</small></a></li>
<li><a href="">September 2008 <small>12 Posts</small></a></li>
<li><a href="">August 2008 <small>3 Posts</small></a></li>
<li><a href="">July 2008 <small>1 Posts</small></a></li>
</ul>
</div>
<div id="content_3" class="content">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contribute</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="bottom">
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:tabSwitch_2(1, 3, 'tab_', 'content_');" id="tab_1" class="active">Topics</a></li>
<li><a href="javascript:tabSwitch_2(2, 3, 'tab_', 'content_');" id="tab_2">Archives</a></li>
<li><a href="javascript:tabSwitch_2(3, 3, 'tab_', 'content_');" id="tab_3">Pages</a></li>
</ul>
<div id="content_1" class="content">
<ul>
<li><a href="">HTML Techniques <small>4 Posts</small></a></li>
<li><a href="">CSS Styling <small>32 Posts</small></a></li>
<li><a href="">Flash Tutorials <small>2 Posts</small></a></li>
<li><a href="">Web Miscellanea <small>19 Posts</small></a></li>
<li><a href="">Site News <small>6 Posts</small></a></li>
<li><a href="">Web Development <small>8 Posts</small></a></li>
</ul>
</div>
<div id="content_2" class="content">
<ul>
<li><a href="">December 2008 <small>6 Posts</small></a></li>
<li><a href="">November 2008 <small>4 Posts</small></a></li>
<li><a href="">October 2008 <small>22 Posts</small></a></li>
<li><a href="">September 2008 <small>12 Posts</small></a></li>
<li><a href="">August 2008 <small>3 Posts</small></a></li>
<li><a href="">July 2008 <small>1 Posts</small></a></li>
</ul>
</div>
<div id="content_3" class="content">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contribute</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm not sleeping too well so where I am. Not my most elegant work, but here's your script with some jquery to help do what I think it is you are wanting to do:
http://jsfiddle.net/XPWxw/
** jquery addition **
$(document).ready(function() {
$(".tabs a").click(function() {
$(this).addClass("active").parent().siblings().find("a.active").removeClass("active");
var id = $(this).parent().parent().find("a").index(this);
$(this).parent().parent().parent().find(".content").css({
display: "none"
}).eq(id).css({
display: "block"
});
});
});
加载中,请稍侯......
精彩评论