Question

我已经测试了这段代码。但是有一些错误。我还附上了JPG 文件，我的需要完全取悦我。

＆＃13;

 $('.list ul li a').click(function() {
   $('.list li a').removeClass("ad");
   $(this).addClass("ad");
 });

＆＃13;

.ad{background-color:green;color:#fff;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<h4>A</h4>
<ul>
  <li><a href="#"> list 1 </a> </li>
  <li><a href="#"> list 2 </a> </li>
  <li><a href="#"> list 3 </a> </li>
</ul>
</div>

<div class="list">
<h4>B</h4>
<ul>
  <li><a href="#"> list 1 </a> </li>
  <li><a href="#"> list 2 </a> </li>
  <li><a href="#"> list 3 </a> </li>
</ul>
</div>

＆＃13;

Answer 1

好的，您必须在A个孩子和B个孩子之间创建一个链接，您可以设置一个data属性，例如data-id，然后找到等于：

 $('.list li a[data-id="'+dataId+'"]').addClass('ad');

$('.list ul li a').click(function() {
  var dataId = $(this).attr('data-id');
  $('.list ul li a').removeClass('ad');
  $('.list li a[data-id="'+dataId+'"]').addClass('ad');
});

.ad {
  background-color: green;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <h4>A</h4>
  <ul>
    <li><a href="#" data-id="list-1"> list 1 </a> </li>
    <li><a href="#" data-id="list-2"> list 2 </a> </li>
    <li><a href="#" data-id="list-3"> list 3 </a> </li>
  </ul>
</div>

<div class="list">
  <h4>B</h4>
  <ul>
    <li><a href="#" data-id="list-1"> list 1 </a> </li>
    <li><a href="#" data-id="list-2"> list 2 </a> </li>
    <li><a href="#" data-id="list-3"> list 3 </a> </li>
  </ul>
</div>

在您的网站上

更新，请使用以下内容：

setInterval(function() {
  $('.btn-nav-main').each(function() {

    if ($(this).hasClass('active')) {
      var dataSlide = $(this).attr('data-slide');
      $('.btn-nav-main').removeClass('gg');
      $('.btn-nav-main data-slide["' + dataSlide + '"]').addClass('gg');
    }
  });
}, 1000);

镜像在jquery中添加类到ul li

1 个答案: