Question

我希望他们是这样的。单击一下，然后将该文本的颜色更改为绿色，直到单击另一个文本。当另一个点击时，点击的一个变为绿色，一旦点击一个返回到前一个颜色。我尝试用css但它只是像活跃的那样。有人可以帮助我吗

<div id="Space">
  <ul>
    <li role="presentation" class="sort">
      <a class="link" href="/?sort=score&page=1" style="text-decoration:none;">link1</a>
    </li>
    <li role="presentation" class="date">
      <a class="link" href="/?sort=date&page=1"  style="text-decoration:none;">link2</a>
    </li>
  </ul>
</div>

Answer 1

HTML代码：

<div id="Space">
<ul>
    <li role="presentation" class="sort">
      <a class="link1" href="/?sort=score&page=1" style="text-decoration:none;">link1</a>
    </li>
    <li role="presentation" class="date">
      <a class="link2" href="/?sort=date&page=2"  style="text-decoration:none;">link2</a>
    </li>
    <li role="presentation" class="date">
      <a class="link3" href="/?sort=date&page=3"  style="text-decoration:none;">link3</a>
    </li>
  </ul>
</div>

Jquery代码：

//on page load
var ul_li_a = $("ul>li>a");
var lastClickTag = localStorage.getItem("last_clicked");

ul_li_a.css("color", "black");
if(lastClickTag){
  $("."+lastClickTag).css("color", "green")
}



$('ul>li').on("click", function(){      
  ul_li_a.css("color", "black");
  $(this).children("a").css("color", "green"); 
  localStorage.setItem("last_clicked", $(this).children("a").attr("class"));  
});

请在此处查看测试代码：https://jsfiddle.net/kkm37zgd/2/

Answer 2

$("a.link").on('click',function(){
   $(".link").css({"color":'whatever color you want'})
   $(this).css({'color':'blue'})
});

我认为这样做了

Answer 3

发布工作片段。

＆＃13;

$(function(){
 $('li[role="presentation"]').on('click',function(){
    $(this).closest('ul').find('.active').removeClass('active');       
    $(this).addClass('active');
 });
});

＆＃13;

.active a{  
  color:green;
}

a{
  font-color:black;
  font-size:24px;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Space">
  <ul>
    <li role="presentation" class="sort">
      <a class="link" href="#">link1</a> 
    </li>
    <li role="presentation" class="date">
      <a class="link" href="#"  style="text-decoration:none;">link2</a>
    </li>
  </ul>
</div>

＆＃13;

请注意，我已从锚标记中删除了网址，以避免导航并更好地向您显示文字颜色变化

两个按钮/链接，一个点亮然后改变颜色，直到另一个点击。当点击另一个时，为那个做同样的事情

3 个答案: