Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Switching tabs

  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Switching tabs

    Hello,
    For school I have to make a website which include tabs.
    The various tabs tasks have to sit like Adobe Flash and Photoshop files.
    But what should be in the tabs is not so fascinating.
    My question was, can someone help me with the code because I have tabs but they dont work .

    This the code i have

    Code:
    <html>
    <head>
    <link rel='stylesheet' type='text/css' href='content.css' />
    
    
        
    <title>website</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- Save for Web Styles (website.psd) -->
    <style type="text/css">
    <!--
    
    
    
    
    
    #Tabel_01 {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:1024px;
    	height:768px;
    	background:url('website.jpg');
    	background-position:top left;
    	background-repeat:no-repeat;
    	
    	#Sidebar {
    	position:absolute;
    	left:26px;
    	top:130px;
    	width:127px;
    	height:610px;
    }
    }
    
    #tabx1_ {
    	position:absolute;
    	left:247px;
    	top:145px;
    	width:122px;
    	height:29px;
    }
    
    
    
    #tabx2_ {
    	position:absolute;
    	left:375px;
    	top:144px;
    	width:122px;
    	height:30px;
    }
    
    
    #tabx3_ {
    	position:absolute;
    	left:518px;
    	top:144px;
    	width:122px;
    	height:30px;
    }
    
    
    #tabx4_ {
    	position:absolute;
    	left:647px;
    	top:144px;
    	width:122px;
    	height:30px;
    }
    
    
    
    #tabx5_ {
    	position:absolute;
    	left:791px;
    	top:145px;
    	width:122px;
    	height:29;
    }
    
    
    #content_ {
    	position:absolute;
    	left:242px;
    	top:188px;
    	width:697px;
    	height:506px;
    	padding: 10px 0 0 10px;
    }
    .tab {
    		text-align:center;
    		padding-top:12px;
            cursor: pointer;
    	}
    
    	.tabsel {
    		text-align:center;
    		padding-top:12px;
    		background-image:url("../Documents/Tabx1.jpg");
    		background-repeat:no-repeat;
    		background-position:top;
    		
    	}
    	
    
    
    
    -->
    </style>
    <script type="text/javascript">
     function wijzigTab( id )
     {
      var tabs = new Array("Tabx1"_, "Tabx2_", "Tabx3_", "Tabx4_" ,"Tabx5_" ); 
      for(var i=0; i<tabs.length; i++)
      {
       if (id == tabs[i]) 
       {
        document.getElementById(tabs[i]).style.backgroundImage = "url('Tabx1.jpg')"; 
        document.getElementById(tabs[i]).className = "tabsel";
       }
       else 
       {
        document.getElementById(tabs[i]).style.backgroundImage = "none";
        document.getElementById(tabs[i]).className = "tab";
       } 
      }
      document.getElementById( "content_" ).innerHTML = document.getElementById( "content_"+id).innerHTML;
      
     }
    </script>
    
    <!-- End Save for Web Styles -->
    </head>
    <body style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
    <div id="container">
    <div id="content">
    <!-- Save for Web Slices (website.psd) -->
    <div id="Tabel_01">
        <FONT COLOR=White> 
    	<div id="tabx1_" class="tab" onclick="wijzigTab('tabx1_')">
    		
    		GIF
    	</div>
    
    	<div id="tabx2_" class="tab" onclick="wijzigTab('tabx2_')">
    	Apple
    	</div>
    
    	<div id="tabx3_" class="tab" onclick="wijzigTab('tabx3_')">
    	Naam
    	</div>
    	<div id="tabx4_" class="tab" onclick="wijzigTab('tabx4_')">
    	Vogel
    	</div>
    
    	<div id="tabx5_" class="tab" onclick="wijzigTab('tabx5_')">
    	Info
    	</div>
     </font>
    	<div id="content_">
    	Dit is het content gedeelte, klik op 1 van de tabs om verder te gaan<br>
       </div>
    </div>
    </div>
    
    <div id="content_tabx1_" class="tabContent">
    <img src="images/animated.gif">
    </div>
    
    <!-- End Save for Web Slices -->
    </body>
    </html>
    And this is my website:
    Last edited by VIPStephan; 01-16-2014 at 05:07 PM. Reason: added code BB tags

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 546 Times in 545 Posts
    Welcome to the forums
    The biggest error is this line
    Code:
    var tabs = new Array("Tabx1"_, "Tabx2_", "Tabx3_", "Tabx4_" ,"Tabx5_" );
    The T's are capitalized and the quote is in the wrong place S/B:
    Code:
    var tabs = new Array("tabx1_", "tabx2_", "tabx3_", "tabx4_" ,"tabx5_" );
    Evolution - The non-random survival of random variants.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 546 Times in 545 Posts
    Other things that need to be corrected:
    Always use a doctype.
    margin: 0px; is the same as doing all four left/right/etc.
    Code:
    <style type="text/css">
    <!-- <- THIS IS REALY OLD CODE AND ISN'T NEEDED
    Javascript is to be located after the HTML but before the </body> tag.
    <FONT COLOR=White> Wrong. S/B in the CSS section.
    Using position:absolute; or relative is bad. Try to use the normal flow of things. You can position 98% of the divs using margins, padding, and floats

    Look at this for tabs (it's not the only way)
    Code:
    <html>
    <head>
    <link rel='stylesheet' type='text/css' href='content.css' />
    
    <title>website</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- Save for Web Styles (website.psd) -->
    <style type="text/css">
    body{
    	margin: 0px;
    	padding: 0px;
    }
    #Tabel_01 {
    	width:1024px;
    	height:768px;
    }
    #tabx1_ {
    	float:left;
    	//left:247px;
    	//top:145px;
    	width:122px;
    	height:30px;
    	margin-right: 5px;
    	margin-left: 15px;
    	color: black;
    	border: 1px solid red;
    }
    
    #tabx2_ {
    	float:left;
    	//left:375px;
    	//top:144px;
    	width:122px;
    	height:30px;
    	margin-right: 5px;
    	color: black;
    	border: 1px solid red;
    }
    #tabx3_ {
    	float:left;
    	//left:518px;
    	//top:144px;
    	width:122px;
    	height:30px;
    	margin-right: 5px;
    	color: black;
    	border: 1px solid red;
    }
    #tabx4_ {
    	float:left;
    	//left:647px;
    	//top:144px;
    	width:122px;
    	height:30px;
    	margin-right: 5px;
    	color: black;
    	border: 1px solid red;
    }
    #tabx5_ {
    	float:left;
    	//left:791px;
    	//top:145px;
    	width:122px;
    	height:30px;
    	margin-right: 5px;
    	color: black;
    	border: 1px solid red;
    }
    #content_ {
    	clear:left;
    	width:697px;
    	height:506px;
    	padding: 10px 0 0 10px;
    	border: 1px solid red;
    }
    .tab {
    	text-align:center;
    	padding-top:12px;
        cursor: pointer;
    }
    .tabsel {
    	text-align:center;
    	padding-top:12px;
    	background-image:url("../Documents/Tabx1.jpg");
    	background-repeat:no-repeat;
    	background-position:top;
    	background-color: blue;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="content">
    		<!-- Save for Web Slices (website.psd) -->
    		<div id="Tabel_01">
    				<div id="tabx1_" class="tab" onclick="wijzigTab('tabx1_')">GIF</div>
    				<div id="tabx2_" class="tab" onclick="wijzigTab('tabx2_')">Apple</div>
    				<div id="tabx3_" class="tab" onclick="wijzigTab('tabx3_')">Naam</div>
    				<div id="tabx4_" class="tab" onclick="wijzigTab('tabx4_')">Vogel</div>
    				<div id="tabx5_" class="tab" onclick="wijzigTab('tabx5_')">Info</div>
    			<div id="content_">
    				Dit is het content gedeelte, klik op 1 van de tabs om verder te gaan<br>
    			</div>
    		</div>
    	</div>
    
    	<div id="content_tabx1_" class="tabContent">
    		<img src="images/animated.gif">
    	</div>
    </div>
    
    <script type="text/javascript">
    function wijzigTab(id){
    	var tabs = new Array("tabx1_", "tabx2_", "tabx3_", "tabx4_" ,"tabx5_" );
    	for(var i=0; i<tabs.length; i++){
    		if (id == tabs[i]){alert("Here");
    			document.getElementById(tabs[i]).style.backgroundImage = "url('Tabx1.jpg')";
    			document.getElementById(tabs[i]).className = "tabsel";
    		}else{
    			document.getElementById(tabs[i]).style.backgroundImage = "none";
    			document.getElementById(tabs[i]).className = "tab";
    		}
    	}
    	document.getElementById( "content_" ).innerHTML = document.getElementById( "content_"+id).innerHTML;
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •