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

    Active tab problem

    Hello Guys,
    I can't make my tabs to stay active (colored). The content change when I click on it however the tab doesn't stay active (colored).
    I would appreciate a lot for some help.

    Here are the codes

    [CODE]
    <div id="Tabs">
    <ul>
    <li id="li_tab1" onclick="tab('tab1')"><a>Tab1</a></li>
    <li id="li_tab2" onclick="tab('tab2')"><a>Tab2</a></li>
    <li id="li_tab3" onclick="tab('tab3')"><a>Tab3</a></li>
    </ul>
    <div id="Content_Area">
    <div id="tab1">
    <p>tab1</p>
    </div>
    <div id="tab2" style="display:none">
    <p>tab2</p>
    </div>
    <div id="tab3" style="display:none">
    <p>
    tab3</p>
    </div> <!--– End of Content_Area Div –-->
    </div> <!--– End of Tabs Div –-->
    <script type="text/javascript">
    function tab(tab) {
    document.getElementById('tab1').style.display = 'none';
    document.getElementById('tab2').style.display = 'none';
    document.getElementById('tab3').style.display = 'none';
    document.getElementById('li_tab1').setAttribute("class", "");
    document.getElementById('li_tab2').setAttribute("class", "");
    document.getElementById(tab).style.display = 'block';
    document.getElementById('li_'+tab).setAttribute("class", "active");
    }
    </script> </div> [ICODE]

    The CSS code

    [CODE]
    #Tabs ul {
    padding: 0px;
    margin: 0px;
    margin-left: 10px;
    list-style-type: none;
    }

    #Tabs p { margin: 1em 0 0.5em 0;color: #343434;font-size: 13px;line-height: 20px;font-weight: normal;font-family: 'Orienta', sans-serif;margin-top: .5em; color: #666;width:498px}

    #Tabs ul li {
    display: inline-block;
    clear: none;
    float: left;
    height: 44px;
    }

    #Tabs ul li a {
    position: relative;margin-top: 16px;display: block;margin-left: 6px;line-height: 24px;padding-left: 10px;background: #f6f6f6;z-index: 9999;border: 1px solid #ccc;border-bottom: 0px;width: 150px;color: #666;text-decoration: none;font-family: AvenirLTStd55Roman;font-size: 1.201em;text-align:center;text-shadow: 1px 1px 0px #fff;
    }

    #Tabs ul li a:hover {
    text-decoration: none;cursorointer;background:#005CB3;color:white;text-shadow: none;
    }

    #Tabs ul li a:active{
    text-decoration: none;background:#005CB3;color:white
    }

    #Tabs #Content_Area {padding: 0 15px;
    clear:both;overflow:hidden;line-height:19px;position: relative;top: 20px;z-index: 5;height: auto;width:530px;overflow: hidden;}
    [ICODE]

  • #2
    New Coder seanmarkham's Avatar
    Join Date
    Dec 2011
    Location
    Lincolnshire, England
    Posts
    50
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Don't know if this is the most elegant method but it works:

    Code:
    <div id="Tabs">
    <ul>
        <li id="li_tab1" onclick="tab('tab1');" ><a id="a_tab1">Tab1</a></li>
    <li id="li_tab2" onclick="tab('tab2')"><a id="a_tab2">Tab2</a></li>
    <li id="li_tab3" onclick="tab('tab3')"><a id="a_tab3">Tab3</a></li>
    </ul>
    <div id="Content_Area">
    <div id="tab1">
    <p>tab1</p>
    </div>
    <div id="tab2" style="display:none">
    <p>tab2</p>
    </div>
    <div id="tab3" style="display:none">
    <p>
    tab3</p>
    </div> <!--– End of Content_Area Div –-->
    </div> <!--– End of Tabs Div –--> 
    </div>
    Code:
    function tab(tab) {
    document.getElementById('a_tab1').style.backgroundColor="";
    document.getElementById('a_tab2').style.backgroundColor="";
    document.getElementById('a_tab3').style.backgroundColor="";
    document.getElementById('tab1').style.display = 'none';
    document.getElementById('tab2').style.display = 'none';
    document.getElementById('tab3').style.display = 'none';
    document.getElementById('li_tab1').setAttribute("class", "");
    document.getElementById('li_tab2').setAttribute("class", "");
    document.getElementById('li_tab3').setAttribute("class", "");
    document.getElementById(tab).style.display = 'block';
    document.getElementById('a_'+tab).style.backgroundColor="#005CB3";
    };
    I haven't changed the css
    Last edited by seanmarkham; 10-12-2013 at 03:03 PM.
    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you a lot for the help. How can I make the background of the first tab colored when the page loads. Thank you in advance.

  • #4
    New Coder seanmarkham's Avatar
    Join Date
    Dec 2011
    Location
    Lincolnshire, England
    Posts
    50
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Code:
    $(document).ready(function () {
    document.getElementById('a_tab1').style.backgroundColor="#005CB3";
    });
    function tab(tab) {
    document.getElementById('a_tab1').style.backgroundColor="";
    document.getElementById('a_tab2').style.backgroundColor="";
    document.getElementById('a_tab3').style.backgroundColor="";
    document.getElementById('tab1').style.display = 'none';
    document.getElementById('tab2').style.display = 'none';
    document.getElementById('tab3').style.display = 'none';
    document.getElementById('li_tab1').setAttribute("class", "");
    document.getElementById('li_tab2').setAttribute("class", "");
    document.getElementById('li_tab3').setAttribute("class", "");
    document.getElementById(tab).style.display = 'block';
    document.getElementById('a_'+tab).style.backgroundColor="#005CB3";
    };
    Haven't been able to test this but should do the trick
    Last edited by seanmarkham; 10-15-2013 at 04:37 PM. Reason: Error with javascript brackets
    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    This is a more flexible solution. You can add as many tabs without changing the script.

    http://jsfiddle.net/77YWH/3/

    For simplicity, I linked the tab and its content via data-tab="tabX" attribute instead of using the id and concatenating/extracting the associated tab id from it.

  • #6
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you a lot for your help again


  •  

    Posting Permissions

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