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

    Tab active in menu

    Hi everyone! I'm making a tab menu with HTML, CSS and JavaScript.

    I have this HTML:

    <ul class="tabmenu">
    <li><a href="javascript:void(0)" onclick="tabs('1');changeActiveStates(this)" id="link1">Informaci&oacute;n</a></li>
    <li><a href="javascript:void(0)" onclick="tabs('2');changeActiveStates(this)" id="link2">Mapas</a></li>
    <li><a href="javascript:void(0)" onclick="tabs('3');changeActiveStates(this)" id="link3">Fotos</a></li>
    <li><a href="javascript:void(0)" onclick="tabs('4');changeActiveStates(this)" id="link4">C&oacute;mo llegar</a></li>
    </ul>

    Then I added some CSS to it (if you need to see it please tell).
    And the JavaScript:

    <script type="text/javascript">
    function tbs(id){
    return document.getElementById(id);
    }

    function tabsen(){
    tbs("1").style.display = "none";
    tbs("2").style.display = "";
    tbs("3").style.display = "";
    tbs("4").style.display = "";
    }

    function tabs(id) {
    tabsen();
    var e = tbs(id);
    e.style.display = ( e.style.display == '' ) ? 'block' : '' ;
    }

    function byId(id) {
    return document.getElementById ? document.getElementById(id) : document.all[id];
    }
    var prevLink = "";
    function changeActiveStates(ele) {
    if (prevLink) byId(prevLink).className = "";
    ele.className = 'active';
    prevLink = ele.id;
    }
    </script>

    The problem is: I don't know how to set active the first tab. I've tried with class='active', but when I use that atribute and click on another tab, the first one doesn't deactivate...

    Can anybody help me?

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    rather then defining var prevLink = "";, initialize it with the first tab object id.

    something like - var prevLink= "1";

    Thanks & Regards,
    Niral Soni
    Last edited by niralsoni; 10-03-2011 at 12:27 AM. Reason: code correction

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've tried this, but didn't work... :S
    Anything else?


  •  

    Posting Permissions

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