ansaurus

Question

jQuery addClass question

Answer 1

A:

Try $(".branche"+sId).addClass('active');

usoban 2009-07-09 13:38:25

Answer 2

+3 A:

I'd simplify it somewhat:

<ul id="brancheNav">
  <li><a href="#" id="tab1">Duurzaam</a></li>
  <li><a href="#" id="tab2">B-to-B</a></li>
  <li><a href="#" id="tab3">Healthcare</a></li>
  <li><a href="#" id="tab4">Dienstverlening</a></li>
</ul>
<div class="opdrachtgevers">
<p>
  <span class="btab1">ADFSDFSDF</span> 
  <span class="btab1">IUYIUYIU</span> 
  <span class="btab1">CVCBVCV</span> 
  <span class="btab4">MNBBMNBMB</span> 
</p>
</div>

which simplifies your Javascript considerably:

$("#branchNav > a").click(function() {
  $("span.b" + this.id).addClass('active");
});

No point doing string manipulation when you don't have to. Try to keep your code as simple as possible especially if a relatively minor markup change makes it just that much more readable.

cletus 2009-07-09 13:39:35

Thanks, but it should add class to multiple span elements with same classname. It's not very neat to have more than one id with same name.

tvgemert 2009-07-09 13:48:06

Easily modified. Edited.

cletus 2009-07-09 13:50:28

Answer 3

A:

openidsujoy 2009-07-09 13:46:30

Yeah ok, but what is the problem with that?

tvgemert 2009-07-09 13:49:47

classes can be repeated, nothing wrong with that

Ben Scheirman 2009-07-09 13:50:10

"This works for me only for the first element (1). The rest gives no result (also no error)"and class="branche1" repeated 3 times so , only takes effect by this code $('span.branche'+sId).addClass('active');

openidsujoy 2009-07-09 13:58:49

Answer 4

+1 A:

The code you have works fine for me. I've pasted a complete page, which I used to test.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <meta name="author" content="Patrick McElhaney">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"&gt;&lt;/script&gt;    
  <script type="text/javascript" charset="utf-8">
    $().ready(function () {
      $("a.brancheTab").click(function(){                     
                              sClickedId = $(this).attr('id');                                
                              sId = sClickedId.substr((sClickedId.length - 1),1);
                              //alert('addClass: ' + sId);
                              $('span.branche'+sId).addClass('active');
                      }); 
    }); 
  </script>            

  <style type="text/css" media="screen">
    .active {font-weight: bold;}
  </style>
</head>
<body>           

  <ul id="brancheNav">
      <li><a href="#" class="brancheTab" id="brancheTab1">Duurzaam</a></li>
      <li><a href="#" class="brancheTab" id="brancheTab2">B-to-B</a></li>
      <li><a href="#" class="brancheTab" id="brancheTab3">Healthcare</a></li>
      <li><a href="#" class="brancheTab" id="brancheTab4">Dienstverlening</a></li>
  </ul>
  <div class="opdrachtgevers">

 <!-- What you have -->
 <p>
      <span class="branche1">ADFSDFSDF</span> 
      <span class="branche1">IUYIUYIU</span> 
      <span class="branche1">CVCBVCV</span> 
      <span class="branche4">MNBBMNBMB</span> 
  </p>

  <!-- What I think you might mean -->
  <p>
      <span class="branche1">ADFSDFSDF</span> 
      <span class="branche2">IUYIUYIU</span> 
      <span class="branche3">CVCBVCV</span> 
      <span class="branche4">MNBBMNBMB</span> 
  </p>

  </div>

</body>
</html>

I'm not sure what you're trying to do, but you might want to add a $('span.branche').removeClass('active') at the beginning so that the "active" class is switched to the selected span, rather than applied cumulatively.

Patrick McElhaney 2009-07-09 13:49:07

Patrick, thank you very much in advance! This code works perfectly for me too... standalone. I even added some extra span's to check it so my span class numbers now are 1,1,1,1,1,2,3,4,2. But in the code of the website I'm building it still doesn't work. I have one $(document).ready function which has this code amongst others.

tvgemert 2009-07-09 14:01:28

Answer 5

A:

You shouldn't have to do this, but try this to see if it works:

$("span.branche" + sId).each(function() {
    $(this).addClass("active");
});

Ben Scheirman 2009-07-09 13:51:26

It's possible, but it would be very strange.

usoban 2009-07-09 13:53:53

I tried, but same result as original.

tvgemert 2009-07-09 14:05:50

My bad, the code is perfect like this but my css wasn't right for the other three classes. I stared myself blind on this because the first tab functioned. Thanks all for your efforts it really helped a lot.

tvgemert 2009-07-09 14:21:31

ansaurus

tags:

views:

answers:

jQuery addClass question

related questions