如何实现类似天猫京东等商城的排序按钮效果？

Question

排序按钮

实现如下效果：
鼠标点击模块，改变字体颜色，边框、背景色，其他模块还原。
鼠标移上未选择模块，改变边框及字体颜色。

存在问题

如何使用JS（JQuery）取到单个模块，我的总是一移上全变了

JD商品页

Answer 1

如果非要用jq的话，首选确认下这几个标签是否是兄弟元素。
如果是，给每个标签添加mouseenter事件，然后通过事件可以获取到当前元素e.target，来设置css属性。
然后再通过jq的siblings获取其他兄弟元素，来设置css属性。
伪码：

$('dom').mouseenter((e) => {
  $(e.target).css('balabala...')
     .siblings().css('balabala...')
})

Answer 2

为啥要用js呢
css的:hover可以实现你的需求啊

Answer 3

css hover和jq toggleClass很方便阿

Answer 4

把这个样式写清晰的话，hover很好实现的

Answer 5

样式：：
<style>
  ul
  {
    height: 66px;
  } li {
    float: left;
    height: 100%;
    list-style: none;
  }
  a{
    display: block;
    padding: 0 20px;
    line-height: 66px;
    border: 1px solid transparent;
  }
  a:hover{
    border: 1px solid red; 
  }
  li a.now {
  background: red;
  border: 1px solid blue;
  color: #ffffff;
  }
</style>

结构————————————————————————————————

<ul>
  <li><a href="">综合排序</a></li>
  <li><a href="">销量</a></li>
  <li><a href="">价格</a></li>
  <li><a href="">时间</a></li>
</ul>
js——————————————————————————————
<script>
var a = document.querySelectorAll('li a');
a.forEach(function ( v , i ) {
  // 注册事件
  v.addEventListener("click",function(e){
    e.preventDefault();
    // 移除奇谈元素的now类
    a.forEach(function( v ){
      v.classList.remove("now")
    });
    // 给自己添加now类
    this.classList.add( "now" );
  });
});
</script>