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

Identifiers are unique, that's why they are called identifiers. — Virus721, Mar 18 '14 at 15:26

score 1 · Accepted Answer · answered Mar 18 '14 at 15:29

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

answered Mar 18 '14 at 15:29

Virus721

8,061
12
67
123

Thanks for taking the time to answer. This works great on the example but it's my bad as this is just a section of the page. The active classes are being added to the first, second and third divs on the page. Is there a way of grabbing the id from the the link clicked and matching this up to the div in product-info section with the same id, and then add the class to this div? – Jay Mar 18 '14 at 15:39
That's why i said you're gonna need more restrictive selectors. I don't know how your page is made but you could add the same class to all the concerned lis, and another class to all the concerned divs and select these classes : `$( '.SomeClass' )` instead of `$( 'li' )` – Virus721 Mar 18 '14 at 15:44
Just adapted this a little. Thanks for the help – Jay Mar 18 '14 at 15:45

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

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.

edited May 23 '17 at 10:25

Community

1
1

answered Mar 18 '14 at 15:29

Nikolay Tsenkov

1,128
10
26

What a massive school boy error on the id part haha. Quite embarrassed about that one! – Jay Mar 18 '14 at 15:41
I hope you mean the question. Haha. – Nikolay Tsenkov Mar 18 '14 at 15:42
we can have different elements with same id but we should not do same element with same id , like two divs with same id, or two divs with same class and same id, if one div have different class, then its fine, you can identify by combination of class attribute and id – Ehsan Sajjad Mar 18 '14 at 15:43

M.chaudhry · Answer 3 · 2014-03-18T15:48:59.393

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>

score 0 · Answer 4 · answered Mar 18 '14 at 15:37

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

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

4 Answers4