www.webdeveloper.com
Results 1 to 10 of 10

Thread: Tabs links inside tab to other tabs work but active class not visible & external link

  1. #1
    Join Date
    Mar 2011
    Posts
    3

    Unhappy Tabs links inside tab to other tabs work but active class not visible & external link

    1)
    I'm having issues with jquery and the tabs I'm using. My tabs work but... I want some more functions and that seems to be a big problem for a Javascript and jquery newby.

    My HTML:
    Code:
    <ul class="tabs">
    <li>Tab1</li>
    <li>Tab2</li>
    <li>Tab3</li>
    <li>Tab4</li>
    <li>Tab5</li>
    <ul>
    <div class="tab_container>
     <div id="first" class="tab_content">...</div>
     <div id="second" class="tab_content">...</div>
     <div id="third" class="tab_content">...</div>
     <div id="fourth" class="tab_content">...</div>
     <div id="fifth" class="tab_content">...</div>
    </div>
    Jquery code
    Code:
    $(document).ready(function() {
     $(".tab_content").hide(); 
     $("ul.tabs li:first").addClass("active").show(); 
     $(".tab_content:first").show();
    
     $("ul.tabs li").click(function() {
    
     $("ul.tabs li").removeClass("active"); 
     $(this).addClass("active"); 
     $(".tab_content").hide(); 
    
     var activeTab = $(this).find("a").attr("href"); 
     $(activeTab).fadeIn(); 
     return false;
    
    });
    I decided to put 4 buttons in the first tab and they should link to the second, third, fourth and fifth tab. I know it's extra and not really neccesary but it looks nice. I even found out how to make te buttons work with the jquery code. I coppied the click function and changed the class. This is what I added after return false;

    Code:
    $(".round .button").click(function() {
     
     $("ul.tabs li").removeClass("active"); 
     $(this).addClass("active");
     $(".tab_content").hide(); 
     
     var activeTab = $(this).find("a").attr("href"); 
     $(activeTab).fadeIn(); 
     return false;
     
     });
    I really don't know if this is correct but it works! What doesn't work is the active class. If you use one of the buttons in the first tab you go to the right tab but the tab itself has no class called active and that ruins the style.

    2)
    I also have one other question: lets say that all the above is my second page and I have my frontpage in which I also have buttons. I want somebody to use the button and end up in the third tab of page 2. My link is something like
    Code:
    page2.html#tab3
    I read that using this should lead you the third tab but it's not working for me. You go to the first tab of page 2 instead.

    I've been reading a LOT! Jquery for dummies, I googled, read the forum and other forums. I posted on a Dutch forum but no answer. I've added a lot of different code but it doesn't work. I guess you can say I'm a bit frustrated now and I just really hope that someone can help me with this.

    Greetings from the Netherlands,
    Annys

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Lightbulb An alternate attempt...

    This solution may not be what you want because:
    1. I don't use JQuery
    2. I'm not sure what your display is suppose to look like
    But it was an interesting problem for me.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head>
    
    <title>TAB Display</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <style type="text/css">
    body { 
    	margin: 0px;
    	padding: 0px;
    }
    .Tab { background-Color:white; }
    .TabPicked { background-Color:yellow; }
    .TabContent {
    	border: 1px solid blue;
    	margin: 0px;
    	padding: 5px;
    }
    .TabInfo {
      height:200px;
      overflow:auto;
    	display:none;
    }
    </style>
    
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?t=243199
    
    function $_(IDS) { return document.getElementById(IDS); }
    function flip() {
      for (var i=1; i<flip.arguments.length; i++) { $_(flip.arguments[i]).style.display = 'none'; }
      $_(flip.arguments[0]).style.display = 'block';
    }
    function TabBoxShow(ids) {
      var sel = document.getElementById('TabMenu').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) { sel[i].className = "Tab"; }
      document.getElementById(ids).className = "TabPicked";
      sel = document.getElementById('TabContent').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
      var idInfo = 'Info'+ids.replace(/\D*/,'');
      document.getElementById(idInfo).style.display = 'block';
    }
    onload = function() { TabBoxShow('Tbtn1'); }
    </script>
    </head>
    <body>
    
    <div style="width:320px; height:250px; margin:10px;">
     <div id="TabMenu">
      <div id="Gbtn0" style="display:block">
       <input class="Tab" id="Tbtn1" onclick="TabBoxShow(this.id)" value="Tab 1" type="button">
       <input class="Tab" id="Tbtn2" onclick="TabBoxShow(this.id)" value="Tab 2" type="button">
       <input class="Tab" id="Tbtn3" onclick="TabBoxShow(this.id)" value="Tab 3" type="button">
       <input class="Tab" id="Tbtn4" onclick="TabBoxShow(this.id)" value="Tab 4" type="button">
       <button class="Tab" style="float:right" onclick="flip('Gbtn1','Gbtn0','Gbtn2')">&gt;</button>
      </div>
    
      <div id="Gbtn1" style="display:none">
       <button class="Tab" style="float:left" onclick="flip('Gbtn0','Gbtn1','Gbtn2')">&lt;</button>
       <input class="Tab" id="Tbtn5" onclick="TabBoxShow(this.id)" value="Tab 5" type="button">
       <input class="Tab" id="Tbtn6" onclick="TabBoxShow(this.id)" value="Tab 6" type="button">
       <input class="Tab" id="Tbtn7" onclick="TabBoxShow(this.id)" value="Tab 7" type="button">
       <input class="Tab" id="Tbtn8" onclick="TabBoxShow(this.id)" value="Tab 8" type="button">
       <button class="Tab" style="float:right" onclick="flip('Gbtn2','Gbtn0','Gbtn1')">&gt;</button>
      </div>
    
      <div id="Gbtn2" style="display:none">
       <button class="Tab" style="float:left" onclick="flip('Gbtn1','Gbtn0','Gbtn2')">&lt;</button>
       <input class="Tab" id="Tbtn9" onclick="TabBoxShow(this.id)" value="Tab 9" type="button">
       <input class="Tab" id="Tbtn10" onclick="TabBoxShow(this.id)" value="Tab 10" type="button">
       <input class="Tab" id="Tbtn11" onclick="TabBoxShow(this.id)" value="Tab 11" type="button">
       <input class="Tab" id="Tbtn12" onclick="TabBoxShow(this.id)" value="Tab 12" type="button">
      </div>
     </div>
    
     <div id="TabContent" class="TabContent">
      <div id="Info1" class="TabInfo">
       Info <p> for <p> Tab <p> #1 <p>
       More <p> Info <p> for <p> Tab <p> #1 <p>
       Additional <p> Info <p> for <p> Tab <p> #1 
      </div>
      <div id="Info2" class="TabInfo"> Info for Tab #2 </div>
      <div id="Info3" class="TabInfo"> Info for Tab #3 </div>
      <div id="Info4" class="TabInfo"> Info for Tab #4 </div>
      <div id="Info5" class="TabInfo"> Info for Tab #5 </div>
      <div id="Info6" class="TabInfo"> Info for Tab #6 </div>
      <div id="Info7" class="TabInfo"> Info for Tab #7 </div>
      <div id="Info8" class="TabInfo"> Info for Tab #8 </div>
      <div id="Info9" class="TabInfo"> Info for Tab #9 </div>
      <div id="Info10" class="TabInfo"> Info for Tab #10 </div>
      <div id="Info11" class="TabInfo"> Info for Tab #11 </div>
      <div id="Info12" class="TabInfo"> Info for Tab #12 </div>
     </div>
    </div>
    <div style="clear: both;"></div>
    
    </body></html>
    Last edited by JMRKER; 03-07-2011 at 09:59 PM.

  3. #3
    Join Date
    Mar 2011
    Posts
    3
    Wow, that's a lot of code that I don't understand. This is not Jquery but Javascript right? It works but it's not a solution for my problem. It could be a solution if it is possible to put a link inside a tab and if your click it you go to that tab.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Question

    Quote Originally Posted by AnnysLM View Post
    Wow, that's a lot of code that I don't understand. This is not Jquery but Javascript right? It works but it's not a solution for my problem. It could be a solution if it is possible to put a link inside a tab and if your click it you go to that tab.
    It is javascript, but JQuery is javascript, so it should be compatible.

    It should be possible to do what you want, but I'm not sure I understand the purpose...
    Why have a link to a tab when it would be just as easy to click on the tab itself?

    Can you provide an example of what you are trying to do?

  5. #5
    Join Date
    Jan 2011
    Location
    United Kingdom, London
    Posts
    117
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <style type="text/css">
    li{
    	display: block;
    }
    .link{
    cursor: pointer;
    }
    .active{
    	background: #0CF;
    }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$("#tabs > div").hide();
    	$(window).bind('hashchange', function() {
    		$("#tabs > div").hide();
    		$(location.hash).fadeIn('fast');
    		$(".tabs li").removeClass("active"); 
    		$(".tabs li").find(location.hash.substr(1)).addClass("active");
    		$(".tabs > li:contains("+location.hash.substr(1)+")").addClass("active");				
    	});
    	if(location.hash.length > 1){
    		$("#tabs > div").hide();
    		$(location.hash).fadeIn('fast');
    		$(".tabs li").removeClass("active"); 
    		$(".tabs > li:contains("+location.hash.substr(1)+")").addClass("active");				
    	}
     	$(".link").click(function(){
    		$("#tabs > div").hide();
    		$("#"+$(this).text()).fadeIn('fast');
    		$(".tabs li").removeClass("active"); 
    		$(".tabs > li:contains("+$(this).text()+")").addClass("active");				
    	});
    });
    </script>
    </head>
    
    <body>
    
    <ul class="tabs">
    <li class="link">Tab1</li>
    <li class="link">Tab2</li>
    <li class="link">Tab3</li>
    <li class="link">Tab4</li>
    <li class="link">Tab5</li>
    </ul>
    <div id="tabs">
     <div id="Tab1"><span class="link">Tab3</span></div>
     <div id="Tab2">TWO</div>
     <div id="Tab3">THREE</div>
     <div id="Tab4">FOUR</div>
     <div id="Tab5">FIVE</div>
    </div>
    </body>
    </html>
    try this one
    Last edited by maurycy; 03-08-2011 at 09:53 AM.
    Javascript, jQuery / Prototype & PHP expert ready to complete your work on Freelancer.co.uk - Hire Me at https://www.freelancer.co.uk/users/1...&action=hireme

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Lightbulb Alternate attempt ...

    Quote Originally Posted by AnnysLM View Post
    Wow, that's a lot of code that I don't understand. This is not Jquery but Javascript right? It works but it's not a solution for my problem. It could be a solution if it is possible to put a link inside a tab and if your click it you go to that tab.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head>
    
    <title>TAB Display</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <style type="text/css">
    body { 
    	margin: 0px;
    	padding: 0px;
    }
    .TabArea { width:320px; height:250px; margin:10px;}
    .Tab { background-Color:white; }
    .TabPicked { background-Color:cyan; }
    .TabContent {
    	border: 1px solid blue;
    	margin: 0px;
    	padding: 5px;
    }
    .TabInfo {
      height:200px;
      overflow:auto;
    	display:none;
    }
    </style>
    
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?t=243199
    
    function $_(IDS) { return document.getElementById(IDS); }
    
    function Nflip(IDS) {
      var sel = $_('TabMenu').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) { $_(sel[i].id).style.display = "none"; }
      $_(IDS).style.display = 'block';
    }
    
    function TabBoxShow(ids) {
      var sel = $_('TabMenu').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) { sel[i].className = "Tab"; }
      $_(ids).className = "TabPicked";
      sel = $_('TabContent').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
      var idInfo = 'Info'+ids.replace(/\D*/,'');
      $_(idInfo).style.display = 'block';
    }
    onload = function() { TabBoxShow('Tbtn1'); }
    </script>
    </head>
    <body>
    
    <div class="TabArea">
     <div id="TabMenu">
      <div id="Gbtn0" style="display:block">
       <input class="Tab" id="Tbtn1" onclick="TabBoxShow(this.id)" value="Tab 1" type="button">
       <input class="Tab" id="Tbtn2" onclick="TabBoxShow(this.id)" value="Tab 2" type="button">
       <input class="Tab" id="Tbtn3" onclick="TabBoxShow(this.id)" value="Tab 3" type="button">
       <input class="Tab" id="Tbtn4" onclick="TabBoxShow(this.id)" value="Tab 4" type="button">
       <button class="Tab" style="float:right" onclick="Nflip('Gbtn1')">&gt;</button>
      </div>
    
      <div id="Gbtn1" style="display:none">
       <button class="Tab" style="float:left" onclick="Nflip('Gbtn0')">&lt;</button>
       <input class="Tab" id="Tbtn5" onclick="TabBoxShow(this.id)" value="Tab 5" type="button">
       <input class="Tab" id="Tbtn6" onclick="TabBoxShow(this.id)" value="Tab 6" type="button">
       <input class="Tab" id="Tbtn7" onclick="TabBoxShow(this.id)" value="Tab 7" type="button">
       <input class="Tab" id="Tbtn8" onclick="TabBoxShow(this.id)" value="Tab 8" type="button">
       <button class="Tab" style="float:right" onclick="Nflip('Gbtn2')">&gt;</button>
      </div>
    
      <div id="Gbtn2" style="display:none">
       <button class="Tab" style="float:left" onclick="Nflip('Gbtn1')">&lt;</button>
       <input class="Tab" id="Tbtn9" onclick="TabBoxShow(this.id)" value="Tab 9" type="button">
       <input class="Tab" id="Tbtn10" onclick="TabBoxShow(this.id)" value="Tab 10" type="button">
       <input class="Tab" id="Tbtn11" onclick="TabBoxShow(this.id)" value="Tab 11" type="button">
       <input class="Tab" id="Tbtn12" onclick="TabBoxShow(this.id)" value="Tab 12" type="button">
      </div>
     </div>
    
     <div id="TabContent" class="TabContent">
      <div id="Info1" class="TabInfo">
       Info <p> for <p> Tab <p> #1 <p>
     This is a
     <a href="javascript:void(0)" onclick="TabBoxShow('Tbtn12');Nflip('Gbtn2')">link</a>
     to tab #12 <p>
       More <p> Info <p> for <p> Tab <p> #1 <p>
       Additional <p> Info <p> for <p> Tab <p> #1 
      </div>
      <div id="Info2" class="TabInfo"> Info for Tab #2 </div>
      <div id="Info3" class="TabInfo"> Info for Tab #3 </div>
      <div id="Info4" class="TabInfo"> Info for Tab #4 </div>
      <div id="Info5" class="TabInfo"> Info for Tab #5 </div>
      <div id="Info6" class="TabInfo"> Info for Tab #6 </div>
      <div id="Info7" class="TabInfo"> Info for Tab #7 </div>
      <div id="Info8" class="TabInfo"> Info for Tab #8 </div>
      <div id="Info9" class="TabInfo"> Info for Tab #9 </div>
      <div id="Info10" class="TabInfo"> Info for Tab #10 </div>
      <div id="Info11" class="TabInfo"> Info for Tab #11 </div>
      <div id="Info12" class="TabInfo">
     Info for Tab #12<p>
     <a href="javascript:void(0)" onclick="TabBoxShow('Tbtn1');Nflip('Gbtn0')">Back</a>
     to Tab #1
      </div>
     </div>
    </div>
    <div style="clear: both;"></div>
    
    </body>
    </html>

  7. #7
    Join Date
    Mar 2011
    Posts
    3
    Thanks for the answers!

    @ jmrker I know that Jquery is javascript... I just forgot that for a moment
    I know it's double; just click the tab but I'm following instructions and I have to admit that it looks nice in the design.

    @maurycy. I tried to use what you suggested. With a few changes that works but no active class.

    @jmrker: Going to try this one after dinner... Just curious and still learning a lot: why do you use Javascript and not Jquery? I know it's the same but it's also different?

    Suggestions for books, tuts, etc are also welcome. I want to learn this. I don't understand it and it's very frustrating. I'll share the link to the website so you can take a look. I hope that you all will give me positive feedback!? It's my third website so...

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    To understand JQuery custom syntax you must understand, first, the base language's (JavaScript) syntax. So: you must learn JavaScript before using JQuery.

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Arrow

    Quote Originally Posted by AnnysLM View Post
    ...
    @jmrker: Going to try this one after dinner... Just curious and still learning a lot: why do you use Javascript and not Jquery? I know it's the same but it's also different?
    ...
    I realize you might be able to have fancier displays and changes and such with JQuery,
    but I can do the same things with regular javascript and css without the overhead of a bunch of
    functions I don't particularly use all the time.

    Plus I can understand the effects of the changes better when I have created them myself.

    It looks like a very good library of prepared functions, but I'm just not into learning to use
    more functions, I'm more interested in how they work
    and how I might modify the code myself to create other, more personalized, effects.

    So it becomes just a matter of need and right now I just don't need it.
    But you are welcome to use it and prosper.

    Good Luck!

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by AnnysLM View Post
    Wow, that's a lot of code that I don't understand. This is not Jquery but Javascript right? It works but it's not a solution for my problem. It could be a solution if it is possible to put a link inside a tab and if your click it you go to that tab.
    JQuery is JavaScript. It is one on the several JavaScript libraries/frameworks.
    What does it mean? Take it like a "core code" (that <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> you were loaded) which performs some, let's say "shortcuts". As any other JavaScript libraries, jQuery was meant to be used by the coders who are already skilled in JavaScript language, but they need to use quickly some "pre-fabricated" pieces of code, to shorten their time of work. It's more or less, a sort of short dialect of the language itself. In the backstage (the "core") you will see exactly the extended JavaScript code.

    JQuery is not another language. It is able to do exactly what JavaScript can do. Nothing more. nothing less.

    Frameworks are useful for skilled programmers, not for beginners. A beginner should first learn the base language: JavaScript. Most of the time programmers don't need JQuery in their sites. Simple and straight native JavaScript code lines will do the trick. Better. Only the real intricate and complex sites might need a library, but only to speed the development time.

    This is the main purpose of JQuery (and any other library/framework): saving the time when the applications are too many or too intricate.

    There is a reverse of the gain: You can not change too much in a framework. It is almost impossible to modify something in the core code, as it is huge and hard to follow in a reasonable time. You have no much space to play with a framework. It has narrow edges. Either you implement it as it is, or you create your own JavaScript code. It is a framework. It has frames When you code straight in the native language - JavaScript - you have the full liberty to exploit all the language's possibilities. In a framework you can't. You are pressed within some frames.
    Last edited by Kor; 03-08-2011 at 01:38 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles