CODEWITHSUNDEEP
phpjquerycodeigniter
KaHeL
KaHeL

Reputation: 4371

Changing the class of another tag onclick of another link in JQuery

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.

Upvotes: 0

Views: 659

Answers (4)

Jonathan Harrison
Jonathan Harrison

Reputation: 893

Try the following

$('.menu a').click(function(){
    //Selects hr tag below a tag and toggle active
    $(this).next().toggleClass('active');
});​

But you will also need to change your CSS .active class to the following to change an HR tag color

hr.active{
display: block; height: 1px;
border: 0; border-top: 1px solid #ffff00;
margin: 1em 0; padding: 0;
}​

Upvotes: 1

Jeff
Jeff

Reputation: 12418

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.

Upvotes: 1

jogesh_pi
jogesh_pi

Reputation: 9782

take a look on the give example: 

$('.menu_item a').each(function(i, e){
    $(this).click(function(){
        $('.menu_item hr').removeClass('active');
        $(this).next().addClass('active');
    });
});

here is the live working code: http://jsfiddle.net/jogesh_pi/EFmvJ/

Upvotes: 1

Sridhar Narasimhan
Sridhar Narasimhan

Reputation: 2653

$("a").click(function() {
 $(this).next().toggle();
});

Thanks

Upvotes: 1

Related Questions