Jump to content
Sign in to follow this  
gsquared

Load an HTML page into a tabbed structure

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>

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...