[vdubplate]

Hey guys I made this nav and want to get the selected text to drop down as user clicks. The problem I am having is that when I click on the text inside the tab everything works. When I click on the tab below the text it doesn't work so well. The text won't reposition itself. I cant seem to get my js to fix the issue. Can someone point out what I might be doing wrong here? I am including a js fiddle. Any help would be much appreciated.

http://jsfiddle.net/...ate/k5chbs9c/1/

[andrewsw]

Please post your code here, between code-tags, and not just as a link (that will eventually break).

[vdubplate]

Here you go:

<div class="header">    
    <ul class="nav">
        <li><a class="active bom" href="#"><span class="test">Lorem Ipsum</span></a></li>
        <li><a class="imports" href="#"><span class="">Lorem</span></a></li>
        <li><a class="alerts" href="#"><span class="">Lorem Ipsum</span></a></li>
        <li><a class="notes" href="#"><span class="">Mo Lorem Ipsum</span></a></li>
        <li><a class="reports" href="#"><span class="">LoremIpsumski</span></a></li>
        <li><a class="cpl" href="#"><span class="">Ipsum</span></a></li>
        <li><a class="knowledgebase" href="#"><span class="">Lorem</span></a></li>
    </ul>
</div>

    *{
        text-transform: uppercase;
        padding: 0;
        margin: 0;
        font-size: 11px;
    }

    .header{
        background-image: url('http://i.imgur.com/AF5UgXV.png');
        position: relative;
        width: 100%;
        height: 25px;
    }

    .nav{
        left: 7px;
        position: relative;
        display: block;

    }
    ul.nav li{
        display: block;
        margin-left: -12px;
        height: 23px;
        padding: 5px 10px 0 0;
        list-style: none;
        position: relative;
        float: left;
    }

    ul.nav li a{
        font-family: arial;
        color: white;
        padding: 4px 11px 0 11px;
        position: relative;
        top: -3px;
        text-decoration: none;
        display: block;
        height: 23px;
    }

    ul.nav li a:hover{
        display: block;
        z-index: 1;
        background: url('http://i.imgur.com/CtwW6wG.png') top left no-repeat,
        url('http://i.imgur.com/nrMinWt.png') top right no-repeat,
        url('http://i.imgur.com/pICr5RZ.png') top center repeat-x;  
        padding: 4px 11px 0 11px;
        position: relative;
        top: -3px;
        text-decoration: none;
        display: block;
        height: 23px;
    }

    ul.nav li a:active{
        display: block;
        padding-top: -10px;
        color: gray !important;
        z-index: 100;
        background: url('http://i.imgur.com/u0OuiaI.png') top left no-repeat,
        url('http://i.imgur.com/ShHbaLE.png') top right no-repeat,
        url('http://i.imgur.com/12RwSwN.png') top center repeat-x;
        top: -3px;
        text-decoration: none;
        height: 23px;
    }

    .active{
        display: block;
        color: gray !important;
        background: url('http://i.imgur.com/u0OuiaI.png') top left no-repeat,
        url('http://i.imgur.com/ShHbaLE.png') top right no-repeat,
        url('http://i.imgur.com/12RwSwN.png') top center repeat-x !important;
        top: 0px;
        text-decoration: none;
        height: 23px;
    }


    .test{
        display: block;
        position: relative;
        top: 2px;
        padding-top: 0px !important;
    }


    .untest{
        display: block;
        position: relative;
        top: 0px;
    }

        $(function() {
            $("li a").click(function(e) {
              e.preventDefault();
              $("li a").removeClass("active");
              $(this).addClass("active");
            });


            $("li a span").click(function(e) {
              e.preventDefault();
              $("li a  span").removeClass("test");
              $(this).addClass("test");
            });

        });

[ArtificialSoldier]

The text moves only when you click on the span, not the anchor tag. Maybe expand the span to fill the entire anchor, or just remove the span and style the anchor.

[vdubplate]

Thanks for taking a look. I was still struggling with getting it to work with the span tags in there. Once I removed those it worked fine. Not sure why that made a difference.

This post has been edited by laytonsdad: 13 October 2014 - 08:27 PM
Reason for edit:: Removed duplicate text