更改jQuery中另一个链接的另一个标签的类onllick

当前修改我的代码为我的菜单栏只是想问如何更改我的hr标签的类，其中每当我点击一个链接链接下面的行将改变。好吧，我正在做我的水平菜单。我已经做了一些代码，但我承认我不太确定自己在做什么。那么这里是我到目前为止的代码：更改jQuery中另一个链接的另一个标签的类onllick

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; 
}

和Jquery的

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

嗯，我基本上只是希望它看起来像Android上的标签ICS一点点。只是一点点。

来源

2012-12-11 KaHeL

我不知道谷歌ICS的样子，但我认为这符合你的要求。

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

Demo here.我改了一下CSS。

在您的代码中，$("hr").click是不必要的。用户没有点击hr标签，只有一个标签。另外，您将active类添加到a标签，而不是hr。

来源

2012-12-11 04:16:23 Jeff

清洁简单易行的解决方案。谢谢！ – KaHeL

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

感谢

来源

2012-12-11 04:08:06

我想切换不同的行为基于我真的想要发生。无论如何，谢谢，反正我可以利用它。 :) – KaHeL

拿上给予例子看看：

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

这里是带电作业代码：http://jsfiddle.net/jogesh_pi/EFmvJ/

来源

2012-12-11 04:14:36

工程很好，但上面的答案更清洁，所以我想我会给他支票，我给你一个投票。谢啦！ – KaHeL

请尝试以下

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

但你还需要你的CSS。主动类更改为以下更改一个HR标签颜色

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

来源

2012-12-11 04:22:46

更改jQuery中另一个链接的另一个标签的类onllick

回答

相关问题