使用 jquery 的 Tab 键不起作用

Question

我想知道用户是否单击 "test 1" 会在侧边栏锚点中添加 class 活动并添加背景以展开列表“#bar1”。

结果应该是侧边栏字体会变红，展开列表背景会变红

但是，如果我单击 "test 1"，我在这里找到的内容不会将 class 添加到锚点。请问有没有人可以帮我更正我的代码

$(document).ready(function(){
  $('.sidebar li a').click(function(e){
    e.preventDefault();
    $(this).addClass('active');
    $(this).removeClass('active');
    var exId=$(this).attr('href');
    $(exId).addClass('expandBg');
    $(exId).siblings().removeClass('expandBg')
  })
});

a.active{
  text-decoration: none;
  color: #f00;
}

.expandBg{
  background-color:#f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
  <ul>
    <li><a href="#bar1">test 1</a></li>
    <li><a href="#bar2">test 2</a></li>
    <li><a href="#bar3">test 3</a></li>
    <li><a href="#bar4">test 4</a></li>
  </ul>
</div>

<div class="expand">
  <ul>
    <li id="bar1">bar1</li>
    <li id="bar2">bar2</li>
    <li id="bar3">bar3</li>
    <li id="bar4">bar4</li>
  </ul>
</div>

Answer 1

这行代码 $(this).removeClass('active'); 产生了一个问题，我们想从 siblings 锚标记中删除 active class 请在下面的代码片段中找到如何做到这一点

$(document).ready(function(){
  $('.sidebar li a').click(function(e){
    e.preventDefault();
    debugger;
    $(this).addClass('active');
    $(this).parent().siblings().find("a").removeClass("active")
    var exId=$(this).attr('href');
    $(exId).addClass('expandBg');
    $(exId).siblings().removeClass('expandBg')
  })
});

a.active{
  text-decoration: none;
  color: #f00;
}

.expandBg{
  background-color:#f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
  <ul>
    <li><a href="#bar1">test 1</a></li>
    <li><a href="#bar2">test 2</a></li>
    <li><a href="#bar3">test 3</a></li>
    <li><a href="#bar4">test 4</a></li>
  </ul>
</div>

<div class="expand">
  <ul>
    <li id="bar1">bar1</li>
    <li id="bar2">bar2</li>
    <li id="bar3">bar3</li>
    <li id="bar4">bar4</li>
  </ul>
</div>

使用 jquery 的 Tab 键不起作用

tabbing with jquery not working

html

javascript

css

jquery

tabbing