Jump to content

gsquared

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

gsquared's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. gsquared
    Nevermind, I got it (: thanks!
  2. 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?
  3. gsquared
    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>
×
×
  • Create New...