Grow your CSS skills. Land your dream job.

The current selected tab will not stay ON?

  • # May 10, 2010 at 6:10 pm

    I have created a simple three tabbed box and built this box very slowly from the example.

    Each time a tab is selected, it goes to the correct <p> paragraph and displays the paragraph assigned to that tab, but that tab or current tab does not stay ON. Any suggestions?

    Any ideas why or simple answers on how to fix it.

    http://www.shelliezdesign.com/CSS/tabbed2.html


    CODE



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <title>Tabbed Accordion</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {
    color: #333;
    font-size: 11px;
    font-family: Helvetica, Arial;
    }
    a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    line-height: 13px;
    font-family: Helvetica, Arial;
    text-transform: uppercase;
    text-align: center;
    font-weight:none;
    }
    a:hover {
    color:#033;
    }
    p {
    margin: 0;
    padding: 20px;
    line-height: 1.5em;
    text-align: justify;
    border: 1px thin #00A5D9;
    }
    #wrapper {
    width: 334px;
    height:317px;
    margin: 0 auto;
    color: #666;
    text-align: left;
    background-color: #E6E7E8;
    border: 1px solid #89D4E3;
    /* Do rounding (native in Firefox and Safari) and curvycorners.js must be installed */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    z-index:2;
    }
    .box {
    background: #E6E7E8;
    }
    .boxholder {
    clear: both;
    padding: 0px;
    background: #00A5D9;
    }
    .tab {
    float: left;
    height: 44px;
    width: 110px;
    margin: 0 1px 0 0;
    text-align: center;
    background: url(images/tab.png) no-repeat;
    z-index:-1;
    }
    .tabtxt {
    margin: 0;
    color: #fff;
    font-size: 12px;
    padding: 10px;
    }
    .tab2 {
    float: left;
    height: 44px;
    width: 110px;
    margin: 0 1px 0 0;
    text-align: center;
    }
    .tab2 a:active {
    background: url(images/tab.png) no-repeat;
    }
    #selected {
    background: url(images/tab.png) no-repeat;
    color:#fff;
    }
    .tabtxt2 {
    margin: 0;
    color: #fff;
    font-size: 12px;
    padding: 0;
    }
    /* Navigation */

    .tabtxt2 li {
    display: inline;
    }
    .tabtxt2 li a {
    color:#033;
    float: left;
    padding:12px 0 16px 0;
    }
    .tabtxt2 li a:hover, .tabtxt2 li.current_page_item a {
    color: #fff;
    background: url(images/tab.png) no-repeat;
    }
    .tabtxt2 a.news {
    width: 112px;
    }
    .tabtxt2 a.events {
    width: 112px;
    }
    .tabtxt2 a.webinars {
    width: 112px;
    }
    .tabtxt2 li a.news:hover, a.news:active, .tabtxt2 li.current_page_item a.news {
    background: url(images/tab.png) no-repeat;
    width:112px;
    }
    .tabtxt2 li a.events:hover, a.events:active, .tabtxt2 li.current_page_item a.events {
    background: url(images/tab.png) no-repeat;
    width:112px;
    }
    .tabtxt2 li a.webinars:hover, a.webinars:active, .tabtxt2 li.current_page_item a.webinars {
    background: url(images/tab.png) no-repeat;
    width:112px;
    }
    </style>
    <script type="text/javascript" src="js/prototype.lite.js"></script>
    <script type="text/javascript" src="js/moo.fx.js"></script>
    <script type="text/JavaScript" src="includes/curvycorners.js"></script>
    <script type="text/javascript" src="js//moo.fx.pack.js"></script>
    <script type="text/javascript">

    function init(){
    var stretchers = document.getElementsByClassName(‘box’);
    var toggles = document.getElementsByClassName(‘tab2′);
    var myAccordion = new fx.Accordion(
    toggles, stretchers, {opacity: false, height: true, duration: 500}
    );
    //hash functions
    var found = false;
    toggles.each(function(li, i){
    var div = Element.find(li, ‘nextSibling’);
    if (window.location.href.indexOf(li.title) > 0) {
    myAccordion.showThisHideOpen(div);
    found = true;
    }
    });
    if (!found) myAccordion.showThisHideOpen(stretchers[0]);
    }
    </script>
    </head>
    <body>
    <div id="wrapper">
    <div id="content">
    <ul class="tabtxt2">
    <li class="tab2" title="first"><a href="#" class="news">NEWS</a></li>
    <li class="tab2" title="second"><a href="#" class="events">EVENTS</a></li>
    <li class="tab2" title="third"><a href="#" class="webinars">WEBINARS</a></li>
    </ul>
    <div class="boxholder">
    <div class="box">
    <p><strong>The First Box</strong><br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tempus ante nec ipsum. In ut felis id leo aliquet euismod. In augue lorem, posuere eu, tincidunt non, bibendum quis, nisl. Integer erat erat, posuere vel, convallis feugiat, accumsan ac, sem. Sed scelerisque tortor nec leo. Etiam vel massa vitae nulla elementum aliquet. Donec egestas semper tellus. Donec ultrices ante cursus lacus. Integer nec est. Suspendisse potenti. Donec fringilla. Maecenas condimentum, arcu sit amet volutpat tincidunt, mi urna sodales nunc, eget porttitor odio lectus sit amet metus. Vivamus aliquam. Etiam lectus leo, venenatis sit amet, vestibulum eu, sollicitudin vitae, metus.</p>
    </div>
    <div class="box">
    <p><strong>The Second Box</strong><br />
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut molestie nunc eu turpis. Donec facilisis enim sed dui. Sed nunc. Cras eu arcu. Praesent vel augue vel dolor ultricies convallis. Nam consectetuer risus eu urna. Cum sociis natoque penatibus et magnis dis peventsurient montes, nascetur ridiculus mus. Nam suscipit. Duis quis lacus sed tellus auctor blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eget massa in ante vehicula pharetra. Ut massa pede, ornare id, ultrices eget, porta et, metus.</p>
    </div>
    <div class="box">
    <p><strong>The Third Box</strong><br />
    Suspendisse accumsan velit at dui tristique consectetuer. Quisque vitae felis ac arcu dignissim facilisis. Quisque ullamcorper. Cras molestie, elit vel blandit mattis, eros metus tempus tortor, id lobortis sem nunc eget dolor. Nullam dui. Aenean justo. Curabitur ullamcorper, libero eu faucibus ultricies, ipsum arcu interdum tellus, eget tempus augue mauris nec purus. Donec a pede nec tortor venenatis bibendum. Nunc quis erat ac augue rhoncus dictum. Nullam id augue at augue iaculis posuere. Nulla volutpat facilisis quam.</p>
    </div>
    <div class="box">
    <p><strong>The Fourth Box</strong><br />
    Morbi feugiat mauris at velit. Proin rutrum lectus. Proin pulvinar turpis tempor nibh. Cras sit amet magna sed risus tempor vestibulum. Nunc vitae nulla. Vivamus fermentum. Praesent a sem. Cras eu neque ultricies tellus tristique vehicula. Praesent dignissim consequat metus. Integer dolor. Donec pellentesque, libero eu ullamcorper suscipit, lorem augue molestie arcu, vitae sodales quam nulla vel urna. Suspendisse accumsan sem nec leo. Proin dui ante, placerat id, consectetuer et, gravida in, velit. Duis non massa. Etiam mollis. Vestibulum id est. Sed sit amet tellus. Vestibulum varius dolor vitae velit.</p>
    </div>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    Element.cleanWhitespace(‘content’);
    init();
    </script>
    </body>
    </html>

    # May 11, 2010 at 12:36 pm

    You need to give the current tab a class and then define .current in css

    # May 12, 2010 at 6:03 pm

    Thank you! I figured it was most likely the CSS!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".