Adding a class to a div with an id equal to a link

Question

I wonder if someone could please help me. I'm trying to add a class of 'active' to a div with the same id as a link. When the page loads the first div will be active but I then want to click on a link and add a class of active to a div on the page so I display this 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');

}    

I'm guessing I need to add an if statement here to say something like if id equal to product id add class

I've tried a few variations but just can't get it. Any help to solve this would be fantastic. If you want to go one step further and suggest a better way I'm all ears.

Thanks in advance

Answer 1

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

But you need more restrictive to selectors.

If you want to show only one div at a time :

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

Answer 2

I usually do this by setting the href of the link tag to point at the id of the target element and then use the href attribute inside the jQuery function. So, something like:

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);
});

Answer 3

I hope you will not get me wrong, but you shouldn't have elements with the same id. Id's are the means of "identification" and because of that they need to be unique: https://stackoverflow.com/a/9454716/880114

Arguably, browser implementations are to blame here, because of being too loose on such important rules' following.

Answer 4

html what i understand you want to replace and hide your divs depending on link click.That way You dun need same ids for more than one id :)

here class hide should b display:none; that will work for you

<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>