Question

currently revising my code for my menu bar just want to ask on how to change the class of my hr tag wherein whenever I click a link the line below the link will change. Well I’m doing it for my horizontal menu. I’ve made the some code but I admit I’m not so sure of what I’m doing. Well here’s my code so far:

HTML

 <div class="menu">
    <table class="menu_item">
        <tr>
            <td>
                <a href="#">Events</a>
                <hr class="active" />
            </td>
            <td>
                <a href="#">Reports</a>
                <hr />
            </td>
            <td>
                <a href="#">Settings</a>
                <hr />
            </td>
            <td>
                <a href="#">Logout</a>
                <hr />
            </td>
        </tr>
    </table>
</div>

<script type="text/javascript" src="<?php echo $base; ?>javascripts/anim.js"></script>

CSS

    .menu{
    margin-top:20px;
    margin-bottom:10px;
}

.menu_item td{
    text-align:center;
    width:25%;
}

.menu_list{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
}

.active{
    background-color:#330000;
}

a {
    color:#ffffff;
    text-decoration:none;
    outline:0;
    border:0;
}

hr.active{
    color:#ffff00;
}

and the Jquery

$("a").click(function() {
  $("hr").click(function (){
      $("hr").removeClass("active");
      $(this).addClass("active");
  });
});

Well I basically just want it to appear like the tabs on android ICS a little bit. Just a little bit though.

Answer 1

I’m not sure what Google ICS looks like, but I think this does what you’re asking.

$("a").click(function() {
      $("hr").removeClass("active");
      $(this).next().addClass("active");
});​

Demo here. I changed the CSS a bit.

In your code, the $("hr").click is unnecessary. The user does not click on the hr tag, only the a tag. Also, you were adding the active class to the a tag, not the hr.