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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help Linking to Tabs

    I am redesigning a website and I am using tabs to clean up the lengthy content on certain pages. The tabs function nicely and do make things a lot cleaner, however I'm having trouble making the tabs linkable. In other words, I'd like to have a direct link to a tab so that when someone clicks the link, it goes directly to the page, but opens the specific tab. I've seen this done on other websites, but have no idea how to do it.

    I'm new to scripting, but have decent knowledge of html and css... but I can't get this to work with traditional <a href="#tab2"> . Help appreciated.

    Here's the html code on my page:
    Code:
    <div id="tabContainer">
        <div class="tabs">
          <ul>
            <li id="tabHeader_1">Tab 1</li>
            <li id="tabHeader_2">Tab 2</li>
            <li id="tabHeader_3">Tab 3</li>
            </ul>
        </div>
        <div class="tabscontent">
          <div class="tabpage" id="tabpage_1">
    <p>content</p>
    </div>
    </div>
    Here's the CSS:
    Code:
    #tabContainer {
    	width:930px;
    	padding:5px;
    	-moz-border-radius: 4px;
    	border-radius: 4px; 
    	text-color:#000;
    	
    }
    
    
    
    .tabs{
    	height:30px;
    	margin:0px 0px -2px -40px;
    }
    
    .tabs > ul{
    	font-size: 1em;
    	list-style:none;
    	/*text-decoration:none; 
    	font-weight:bold;*/
    }
    
    .tabs > ul > li{
    	margin:0 5px 0 0;
    	padding:7px 10px;
    	display:block;
    	float:left;
    	color:#FFF;
    	font-weight:bold;
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	user-select: none;
    	-moz-border-radius-topleft: 4px;
    	-moz-border-radius-topright: 4px;
    	-moz-border-radius-bottomright: 0px;
    	-moz-border-radius-bottomleft: 0px;
    	border-top-left-radius:4px;
    	border-top-right-radius: 4px;
    	border-bottom-right-radius: 0px;
    	border-bottom-left-radius: 0px; 
    	background: #755a3f; /* old browsers */
    	background: -moz-linear-gradient(top, #755a3f 0%, #755a3f 100%); /* firefox */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#755a3f), color-stop(100%,#755a3f)); /* webkit */
    	-moz-box-shadow: -2px -2px 2px #333;
     	-webkit-box-shadow: -2px -2px 2px #333;
    	 box-shadow: -2px -2px 2px #333;
    		
    			
    }
    
    a.tab{
    	color:#fff; text-decoration:none;
    	 	 a.tab:active: color:#000; text-decoration:none;
    }
    
    .tabs > ul > li:hover{
    	background: #91704e; /* old browsers */
    	background: -moz-linear-gradient(top, #91704e 0%, #91704e 10%, #91704e 50%, #91704e 100%); /* firefox */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#91704e), color-stop(10%,#91704e), color-stop(50%,#91704e), color-stop(100%,#91704e)); /* webkit */
    	cursor:pointer;
    	color: #fff;
    	
    }
    
    .tabs > ul > li.tabActiveHeader{
    	background: #D2B48C; /* old browsers */
    	background: -moz-linear-gradient(top, #D2B48C 0%, #D2B48C 10%, #D2B48C 50%, #D2B48C 100%); /* firefox */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D2B48C), color-stop(10%,#D2B48C), color-stop(50%,#D2B48C), color-stop(100%,#D2B48C)); /* webkit */
    	cursor:pointer;
    	color: #000;
    
    }
    
    .tabscontent {
    	-moz-border-radius-topleft: 0px;
    	-moz-border-radius-topright: 4px;
    	-moz-border-radius-bottomright: 4px;
    	-moz-border-radius-bottomleft: 4px;
    	border-top-left-radius: 0px;
    	border-top-right-radius: 4px;
    	border-bottom-right-radius: 4px;
    	border-bottom-left-radius: 4px; 
    	padding:10px 10px 25px;
    	/*border-top:2px solid #856C48;
    	border-right:2px solid #856C48;
    	border-bottom:2px solid #856C48;
    	border-left:2px solid #856C48; */
    	-moz-box-shadow: 0 0 5px 2px #333;
     	-webkit-box-shadow: 0 0 5px 2px #333;
    	 box-shadow: 0 0 5px 2px #333;
     	
    	
    
    	background: #D2B48C; /* old browsers */
    	background: -moz-linear-gradient(top, #D2B48C 0%, #D2B48C 90%, #D2B48C 100%); /* firefox */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D2B48C), color-stop(90%,#D2B48C), color-stop(100%,#D2B48C)); /* webkit */
    	margin:0;
    	color:#000;
    }
    Lastly, the javascript:

    Code:
    window.onload=function() {
    
      // get tab container
      var container = document.getElementById("tabContainer");
        // set current tab
        var navitem = container.querySelector(".tabs ul li");
        //store which tab we are on
        var ident = navitem.id.split("_")[1];
        navitem.parentNode.setAttribute("data-current",ident);
        //set current tab with class of activetabheader
        navitem.setAttribute("class","tabActiveHeader");
    
        //hide two tab contents we don't need
        var pages = container.querySelectorAll(".tabpage");
        for (var i = 1; i < pages.length; i++) {
          pages[i].style.display="none";
        }
    
        //this adds click event to tabs
        var tabs = container.querySelectorAll(".tabs ul li");
        for (var i = 0; i < tabs.length; i++) {
          tabs[i].onclick=displayPage;
        }
    }
    
    // on click of one of tabs
    function displayPage() {
      var current = this.parentNode.getAttribute("data-current");
      //remove class of activetabheader and hide old contents
      document.getElementById("tabHeader_" + current).removeAttribute("class");
      document.getElementById("tabpage_" + current).style.display="none";
    
      var ident = this.id.split("_")[1];
      //add class of activetabheader to new active tab and show contents
      this.setAttribute("class","tabActiveHeader");
      document.getElementById("tabpage_" + ident).style.display="block";
      this.parentNode.setAttribute("data-current",ident);
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,445
    Thanks
    23
    Thanked 630 Times in 629 Posts
    You don't need scripting for this. <a href="#tab2"> will go to a place on your page that is marked with:
    <a name=tab2>This is tab2</a>

    To go to a different page and to the tab use:
    <a href="http://www.differentPageName.html#tab2">Go to diff page</a>

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi sunfighter,

    Thanks for your response. I've tried your suggestion numerous times and numerous ways, but it won't work. It takes me to the right page, but always defaults to the first tab.

    If you have any additional thoughts I'd appreciate hearing them.

    Thanks.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,445
    Thanks
    23
    Thanked 630 Times in 629 Posts
    You didn't paste the code you used for the last message, so I can't see what you did wrong.

    This is the page we display. It's a little off cause I don't have the time to make it any better. It's named

    test.html
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>This is test.html</title>
    <style type="text/css">
    #tabContainer {
    	width:930px;
    	//padding:5px;
    	//-moz-border-radius: 4px;
    	//border-radius: 4px;
    	text-color:#000;
    }
    .tabs{
    	height:30px;
    	margin:0px 0px -2px -40px;
    }
    .tabs > ul{
    	font-size: 1em;
    	list-style:none;
    }
    .tabs > ul > li{
    	margin:0 5px 0 0;
    	padding:7px 10px;
    	display:block;
    	float:left;
    	color:#FFF;
    	font-weight:bold;
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	user-select: none;
    	-moz-border-radius-topleft: 4px;
    	-moz-border-radius-topright: 4px;
    	-moz-border-radius-bottomright: 0px;
    	-moz-border-radius-bottomleft: 0px;
    	border-top-left-radius:4px;
    	border-top-right-radius: 4px;
    	border-bottom-right-radius: 0px;
    	border-bottom-left-radius: 0px;
    	background: #755a3f; /* old browsers */
    	background: -moz-linear-gradient(top, #755a3f 0%, #755a3f 100%); /* firefox */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#755a3f), color-stop(100%,#755a3f)); /* webkit */
    	-moz-box-shadow: -2px -2px 2px #333;
     	-webkit-box-shadow: -2px -2px 2px #333;
    	 box-shadow: -2px -2px 2px #333;
    }
    .tabs > ul > li:hover{
    	background: #91704e; /* old browsers */
    	background: -moz-linear-gradient(top, #91704e 0%, #91704e 10%, #91704e 50%, #91704e 100%); /* firefox */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#91704e), color-stop(10%,#91704e), color-stop(50%,#91704e), color-stop(100%,#91704e)); /* webkit */
    	cursor:pointer;
    	color: #fff;
    
    }
    .tabs > ul > li.tabActiveHeader{
    	background: #D2B48C; /* old browsers */
    	background: -moz-linear-gradient(top, #D2B48C 0%, #D2B48C 10%, #D2B48C 50%, #D2B48C 100%); /* firefox */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D2B48C), color-stop(10%,#D2B48C), color-stop(50%,#D2B48C), color-stop(100%,#D2B48C)); /* webkit */
    	cursor:pointer;
    	color: #000;
    }
    
    .tabscontent {
    	-moz-border-radius-topleft: 0px;
    	-moz-border-radius-topright: 4px;
    	-moz-border-radius-bottomright: 4px;
    	-moz-border-radius-bottomleft: 4px;
    	border-top-left-radius: 0px;
    	border-top-right-radius: 4px;
    	border-bottom-right-radius: 4px;
    	border-bottom-left-radius: 4px;
    	padding:10px 10px 25px;
    	-moz-box-shadow: 0 0 5px 2px #333;
     	-webkit-box-shadow: 0 0 5px 2px #333;
    	 box-shadow: 0 0 5px 2px #333;
    	background: #D2B48C; /* old browsers */
    	background: -moz-linear-gradient(top, #D2B48C 0%, #D2B48C 90%, #D2B48C 100%); /* firefox */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D2B48C), color-stop(90%,#D2B48C), color-stop(100%,#D2B48C)); /* webkit */
    	margin:6px 0px;
    	height: 100px;
    	overflow:hidden;
    	color:#000;
    }
    </style>
    </head>
    
    <body>
    <div id="tabContainer">
        <div class="tabs">
          <ul>
            <li><a href="#tab1">Tab 1</a></li>
            <li><a href="#tab2">Tab 2</a></li>
            <li><a href="#tab3">Tab 3</a></li>
            </ul>
        </div>
        <div class="tabscontent">
    		<a name=tab1>
    		<p>content tab1</p>
    		<p>content tab1</p>
    		<p>content tab1</p>
    		<p>content tab1</p></a>
    		<a name=tab2>
    		<p>content tab2</p>
    		<p>content tab2</p>
    		<p>content tab2</p>
    		<p>content tab2</p></a>
    		<a name=tab3>
    		<p>content tab3</p>
    		<p>content tab3</p>
    		<p>content tab3</p>
    		<p>content tab3</p></a>
    		<p>This will not show</p>
    		<p>This will not show</p>
    		<p>This will not show</p>
    		<p>This will not show</p>
    		<p>This will not show</p>
    		<p>This will not show</p>
    		<p>This will not show</p>
    		<p>This will not show</p>
    	</div>
    </div>
    </body>
    
    </html>
    The tabs should works as expected.

    Here's a page that links to the above and displays the second tab info

    page2.html:
    Code:
    <a href="test.html#tab2">Go to diff page</a>


  •  

    Posting Permissions

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