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

Question

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

html

  <p 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的去除。

Answer 1

HTML:

<p 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'); // 添加当前元素的样式
  })
});

Answer 2

那为什么不直接在第一个li后面加上class="cur"?
还有不要给每个li都添加点击事件，采用事件代理的方法

document.getElementById("con_vdjs_1").addEventListener("click",function(e) {
  // 检查事件源e.targe是否为Li
  if(e.target && e.target.nodeName.toUpperCase == "LI") {
    // 真正的处理过程在这里
  }
});

Answer 3

最简单的就是在第一个元素上单独加一个点击后样式的class