Question

我想知道是否有人可以帮助我。我正在尝试将一个“活动”类添加到具有相同ID作为链接的div中。当页面加载时，第一个div将处于活动状态，但我想点击链接并在页面上的div中添加一个活动类，以便显示此div。

HTML：

<ul id="items">
  <li>
    <a href="#" id="1">item 1</a>
  </li>
  <li>
    <a href="#" id="2">item 2</a>
  </li>
  <li>
    <a href="#" id="3" item 3</a>
 </ul>

<div id="product-info">

  <div id="1" class="active">
    product info
  </div>

  <div id="2">
    product info
  </div>

  <div id="3">
    product info
  </div>

</div>

jQuery的：

var buttons = $('#items').find('a');

buttons.click(function(){
  var id = $(this).attr('id');
  var product = $('product-info div');      
  var productId = product.attr('id');

  product.removeClass('active');

}

我猜我需要在这里添加一个if语句来说明如果id等于product id add class

我尝试了一些变化但却无法得到它。任何帮助解决这个问题都会很棒。如果你想更进一步，建议一个更好的方式，我会全力以赴。

提前致谢

Answer 1

$( 'li' ).on( 'click', function() {
   $('div').eq( $(this).index() ).addClass( 'active' );
});

但是你需要更多限制选择器。

如果您想一次只显示一个div：

$( 'li' ).on( 'click', function() {
   $('div').removeClass( 'active' ).eq( $(this).index() ).addClass( 'active' );
});

Answer 2

我希望你不会误解我，但你不应该有相同身份的元素。 ID是＆＃34;识别＆＃34; 的手段，因此它们必须是唯一的：https://stackoverflow.com/a/9454716/880114

可以说，浏览器的实施应归咎于此，因为在这些重要规则上过于宽松。以下

Answer 3

HTML 我明白你想要替换和隐藏您的div取决于链接点击。这样你不需要相同的ID多个ID：）

这里的课程hide应该b display:none;适用于您

<ul class="au-img">
                                    <li id="1">1</li>
                                    <li id="2">2</li>
                                    <li id="3">3</li>
                                </ul>
            <div class="default-text"></div>


     <div class="about-1" >1</div>
<div class="about-2 hide" >2</div>
 <div class="about-3 hide" >3</div>

的javascript

<script type="text/javascript">       
$('.au-img li').on("click", function(e) {
  var $this = $(this),
      $id = $this.attr('id'),
      $class = '.' + $('.about-' + $id).attr('class').replace('hide', '');

  $('.default-text').addClass('hide');
  $('.about-' + $id).removeClass('hide');
  $('div[class*=about]').not($class).addClass('hide');
});
</script>

Answer 4

我通常通过将链接标记的href设置为指向目标元素的id然后使用jQuery函数内的href属性来完成此操作。所以，像：

HTML：

<ul id="items">
  <li>
    <a href="#1">item 1</a>
  </li>
  <li>
    <a href="#2">item 2</a>
  </li>
  <li>
    <a href="#3">item 3</a>
 </ul>

<div id="product-info">

  <div id="1" class="active">
    product info
  </div>

  <div id="2">
    product info
  </div>

  <div id="3">
    product info
  </div>

</div>

jQuery：

$("#items").find("a").click(function(e) { 
  $("#product-info").find("div").removeClass("active"); $(e.href).addClass("active", true);
});

将类添加到id等于链接的div

4 个答案: