Jump to content

Load an HTML page into a tabbed structure


gsquared
 Share

Recommended Posts

Hey everyone,This is my first post here, so please don't be too critical. Details: I'm coding a tabbed page and I have the basic layout set up as well as the javascript working to allow me to switch back and forth between tabs. Problem: The content I want to place in the Tabs are other HTML pages to be load and I'm totally oblivious on how to this. My code is below. What would I have to do in order to load the page without messing up any of the current functions or code? Much Thanks in advance

<head><style type="text/css">  body {   margin:40px;  }  #tabbed_box {   margin: 0px auto 0px auto;   width:300px;  }    .tabbed_box h4 {   font-family:Arial, Helvetica, sans-serif;   font-size:23px;   color:#000000;   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 {     padding:8px;   width:auto;  }  ul.tabs {   margin:0px;   padding:0px;  }  ul.tabs li {   list-style:none;   display:inline;  }  ul.tabs li a {   background-color:#464c54;   color:#ffffff;   padding:8px 14px 7px 14px;   text-decoration:none;   font-size:12px;   font-family:Verdana, Arial, Helvetica, sans-serif;   font-weight:bold;   text-transform:uppercase;   border:2px solid #464c54;   border-bottom: none;   background-image:url(http://www.jbsbcorp.com/gabriel/gtl/tab_off.jpeg);   background-repeat:repeat-x;   background-position:bottombottom;  }  ul.tabs li a:hover {   background-color:#2f343a;   border-bottom: none;  }  ul.tabs li a.active {   background-color:#ffffff;   color:red;   border:2px solid #464c54;   border-bottom: 2px solid #ffffff;   background-image:url(http://www.jbsbcorp.com/gabriel/gtl/tab_on.jpg);   background-repeat:repeat-x;   background-position:top;  }  .content {   background-color:#ffffff;   padding:10px;   border:2px solid #464c54;   background-image:url(http://www.jbsbcorp.com/gabriel/gtl/content_bottom.jpg);   background-repeat:repeat-x;   background-position:bottombottom;    }  #look_2, #look_3, #look_4{   display:none;  }  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;  }</style><script type="text/javascript">  function tabSwitch(new_tab, new_content) {    document.getElementById('look_1').style.display = 'none';   document.getElementById('look_2').style.display = 'none';   //document.getElementById('look_3').style.display = 'none';   //document.getElementById('look_4').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('tab_4').className = '';   document.getElementById(new_tab).className = 'active';	   }  </script></head><body>  	<div class="tabbed_area"> 		<ul class="tabs">		 <li><a href="javascript:tabSwitch('tab_1', 'look_1');" id="tab_1" class="active">LOOK 1</a></li>		 <li><a href="javascript:tabSwitch('tab_2', 'look_2');" id="tab_2">LOOK 2</a></li>		<!-- <li><a href="javascript:tabSwitch('tab_3', 'look_3');" id="tab_3">LOOK 3</a></li> -->		<!-- <li><a href="javascript:tabSwitch('tab_4', 'look_4');" id="tab_4">LOOK 4</a></li> -->	 </ul>		 <!-- LOOK ONE -->  		<div id="look_1" class="content">			<ul>				<li><a href=""></a></li>  			</ul>		</div>	  		<!-- LOOK TWO -->		<div id="look_2" class="content">			<ul>				<li><a href="">December 2008 <small>6 Posts</small></a></li>  			</ul>		</div>	  		<!-- LOOK THREE		<div id="look_3" class="content">			<ul>				<li><a href="">Home</a></li>  			</ul>		</div> -->	  	  		<!-- LOOK FOUR		<div id="look_4" class="content">			<ul>				<li><a href="">dhgdh</a></li>  			</ul>		</div>  --> 	</div> </body>

Link to comment
Share on other sites

If you want to load an external page then you'll need to send an ajax request to get the content and put it into the tab container. That would assume you've got a single tab container, where the tabs just remove the old content and add the new content. If all of the content is already on the page in separate containers for each tab then what you have is enough. With either of those approaches the code you add can't be a complete HTML document, only the relevant section of the body. The end result still needs to be a valid HTML page (only 1 doctype, head, body, etc). If you need to load an entire complete HTML document then you need to use an iframe, where the Javascript function would change the src that it points to.

Link to comment
Share on other sites

I understand what I might have to do, but I am still quite new to javascript.... The link/page is want to load in "tab_1" is (http://www.jbsbcorp.com/gabriel/gtl/look_1.html) then in "tab_2" and so on i want the content to be replaced (ajax?) or would it just be easier to place an iframe on all the tabs and have independent html docs on each tab?

Link to comment
Share on other sites

It's up to you how you want it to work. You can either just paste the relevant HTML code from the bodies of the other pages into the various tab containers and then toggle the visibility, or you can use one tab container and use ajax to get the new content and then remove the old content and add the new, or the iframe. The iframe would work either if you have one iframe per container that you toggle the visibility between or if you have 1 iframe container that you use Javascript to update the src URL for.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...