gsquared
-
Posts
3 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by gsquared
-
-
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?
-
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>
Load an HTML page into a tabbed structure
in JavaScript
Posted
Nevermind, I got it (: thanks!