Hello, folks. I was wondering if someone could help me out. Research, trail and error, and just plain on experimenting didn’t get me very far.
I am trying to create a site that has a page displaying past work of a company. For each project they complete, there is the “client objective,” "agency concept,’ and the “results.” I have those three categories displayed in one tabbed container to save space. It works just fine! However, when I go to add the next project completed, using the same script (and as many variations as my mind could conceive), I either have multiple failures or just one failure.
What must I change on additional Scripts/HTML in order to allow this script to run multiple times on one page?
HTML:
<!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>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="tabbed_box_1" class="tabbed_box">
<h4>Browse Site <small>Select a Tab</small></h4>
<div class="tabbed_area">
<script src="functions.js" type="text/javascript"></script>
<ul class="tabs">
<li><a href="javascript:tabSwitch_2(1, 3, 'tab_', 'content_');" id="tab_1" class="active">FORUMS</a></li>
<li><a href="javascript:tabSwitch_2(2, 3, 'tab_', 'content_');" id="tab_2">ARTICLES</a></li>
<li><a href="javascript:tabSwitch_2(3, 3, 'tab_', 'content_');" id="tab_3">MONEY</a></li>
</ul>
<div id="content_1" class="content">Content for Tab 1</div>
<div id="content_2" class="content">Content for Tab 2</div>
<div id="content_3" class="content">Content for Tab 3</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-image:url(images/background.jpg);
background-repeat:no-repeat;
background-position:top center;
background-color:#000;
margin:40px;
}
#tabbed_box_1 {
margin: 0px auto 0px auto;
width:690px;
}
.tabbed_box h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:23px;
color:#4b9d00;
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 #4b9d00;
background-color:#0a1262;
padding:8px;
}
ul.tabs {
margin:0px; padding:0px;
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
background-color:#cccccc;
background-image:url(images/tab_off.jpg);
background-repeat:repeat-x;
background-position:bottombottom;
color:#ffffff;
padding:8px 20px 8px 20px;
text-decoration:none;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:none;
border:1px solid #4b9d00;
border-bottom: 0px solid #ffffff;
}
ul.tabs li a:hover {
background-color:#f6f6f6;
border-color:#4b9d00;
}
ul.tabs li a.active {
background-color:#ffffff;
background-image:url(images/tab_on.jpg);
background-repeat:repeat-x;
background-position:top;
color:#0a1262;
border:1px solid #4b9d00;
border-bottom: 0px solid #ffffff;
}
.content {
background-color:#d0d0d0;
background-image:url(images/content_bottom.jpg);
background-repeat:repeat-x;
background-position:bottombottom;
padding:10px;
border:1px solid #4b9d00;
}
#content_2, #content_3 { display:none; }
.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:none;
font-family: Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li:last-child {
border-bottom:none;
}
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';
}
Thanks in advance, folks! I really tried to figure it out and I just don’t know Javascript well enough. 