更改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

回答

相關問題