javascript - 本人新手。问个jquery click的问题。多谢

问题描述

问 题

用 jquery addClass与removeClass
但第一个li想保持点击后的效果
不会写了。请教下各位大神。我的代码如下

html

  <div id="con_vdjs_1" style="display: block;">
        <ul id="tab2">

          <li class="123">·<a href="url" title="title" onclick="playvideo('xxx', 'xxx')" >xxxxxxxx</a></li>
         
        </ul>

JQ

<script type="text/javascript">
$(document).ready(function() {

    $("#tab2 a").click(function() {
        
        $(this).siblings('a').removeClass('cur');  // 删除其他兄弟元素的样式

        $(this).addClass('cur');                            // 添加当前元素的样式

    });
</script>

想给a加个class 默认第一个是点击后的效果。点击第二个li 第一个li的class的去除。

解决方案

HTML:

<div id="con_vdjs_1" style="display: block;">
  <ul id="tab2">
    
    <li class="123"><a href="#" title="title">xxxxxxxx</a></li>
    <li class="123"><a href="#" title="title">xxxxxxxx</a></li>
    <li class="123"><a href="#" title="title">xxxxxxxx</a></li>

  </ul>

CSS:

// 被选中的元素高亮
.cur a{ 
  color:red;
}

JS:

$(document).ready(function() {
  // 在父元素上 对元素 a 进行事件代理，即当元素a被点击时，事件冒泡到父元素，执行如下方法
  $("#tab2").on("click", "a", function() {
    $(this).parent().siblings('li').removeClass('cur'); // 去除其他的高亮 class 
    $(this).parent().addClass('cur'); // 添加当前元素的样式
  })
});

这篇关于javascript - 本人新手。问个jquery click的问题。多谢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！