Question

在编码中，我想创建jQuery函数，就像这样工作

首先<li>有background : red;

当我点击链接<a href="JavaScript:doCallAjax('Good');"> Good</a>时，会将此<li>样式设置为background : red;并将其他<li>设置为background : none;

OR

当我点击链接<a href="JavaScript:doCallAjax('Normal');"> Normal</a>时，系统会将此<li>样式设置为background : red;，并将其他<li>设置为background : none; 太

<ul class="item">
  <li class="item_list" style=" border-right: 2px solid #e6e6e6;  float: left;  margin: 0 0 3px;  padding: 0 5px; background: red; ">
    <a href="JavaScript:doCallAjax('');">All</a>
  </li>
  <li class="item_list" style=" border-right: 2px solid #e6e6e6;  float: left;  margin: 0 0 3px;  padding: 0 5px; ">
    <a href="JavaScript:doCallAjax('Good');"> Good</a>
  </li>
  <li class="item_list" style=" border-right: 2px solid #e6e6e6;  float: left;  margin: 0 0 3px;  padding: 0 5px; ">
    <a href="JavaScript:doCallAjax('Normal');"> Normal</a><br>
  </li>
</ul>

我该怎么办？谢谢你的每一个

Answer 1

点击锚点后，您可以将所有列表项目背景设置为无，然后使用 .css() 将背景颜色仅更改为红色，以使用您点击的锚点的目标父列表项目的 .parent() ：

$('ul li a').click(function() { $('ul li').css('background','none'); $(this).parent().css('background','red'); });

<强> Fiddle Demo

根据您的评论，您可以使用.按类定位元素：

$('ul.item li.item_list a').click(function() { $('ul.item li.item_list').css('background','none'); $(this).parent().css('background','red'); });

<强> Fiddle Demo

Answer 2

这是一个片段

 <a href="JavaScript:doCallAjax('Good');" onclick="$(this).parent().css( 'background', 'none');"> Good</a>

了解更多 http://api.jquery.com/css/＆amp; https://api.jquery.com/parent/

Answer 3

<ul>
  <li style=" border-right: 2px solid #e6e6e6;  float: left;  margin: 0 0 3px;  padding: 0     5px; background: red; ">
     <a href="JavaScript:doCallAjax('');">All</a>
  </li>
  <li style=" border-right: 2px solid #e6e6e6;  float: left;  margin: 0 0 3px;  padding: 0 5px; ">
   <a id="redColor" href="#"> Good</a>
</li>
  <li style=" border-right: 2px solid #e6e6e6;  float: left;  margin: 0 0 3px;  padding: 0 5px; ">
    <a id="notRed" href="#"> Normal</a><br>
  </li>
</ul> 

 <script type=text/javascript>
  $("#redColor").click(function(){
      $(li).css("background-color","red");
   });

  $("#notRed").click(function(){
    $(li).css("background-color","none");
  });
 </script>

jquery点击设置元素的背景颜色？

3 个答案: