在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 如何實現(xiàn)類似天貓京東等商城的排序按鈕效果？

如何實現(xiàn)類似天貓京東等商城的排序按鈕效果？

圖片描述

排序按鈕

實現(xiàn)如下效果：
鼠標點擊模塊，改變字體顏色，邊框、背景色，其他模塊還原。
鼠標移上未選擇模塊，改變邊框及字體顏色。

存在問題

如何使用JS（JQuery）取到單個模塊，我的總是一移上全變了

clipboard.png

clipboard.png

JD商品頁

回答
編輯回答
熊出沒

如果非要用jq的話，首選確認下這幾個標簽是否是兄弟元素。
如果是，給每個標簽添加mouseenter事件，然后通過事件可以獲取到當前元素e.target，來設置css屬性。
然后再通過jq的siblings獲取其他兄弟元素，來設置css屬性。
偽碼：

$('dom').mouseenter((e) => {
  $(e.target).css('balabala...')
     .siblings().css('balabala...')
})
2017年3月20日 18:22
編輯回答
萌二代

css hover和jq toggleClass很方便阿

2018年8月23日 02:50
編輯回答
情殺

為啥要用js呢
css的:hover可以實現(xiàn)你的需求啊

2017年3月5日 12:05
編輯回答
晚風眠

把這個樣式寫清晰的話，hover很好實現(xiàn)的

2018年8月24日 03:56
編輯回答
綰青絲
樣式：：
<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>

結(jié)構————————————————————————————————

<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>
2018年1月30日 14:46