CODEWITHSUNDEEP
phpjquerycss
user2037828
user2037828

Reputation: 70

Change Class of Multiple Elements at Once

I'm standing in front of a forest. Can you help me find the tree?

Currently I'm generating a list with PHP

echo '<div>';
echo '  <ul>';
foreach ( $myArray as $key => $value):
    echo '<li>'. $value . '</li>';
endforeach;
echo '  </ul>';
echo '</div>';

The array contains a limited number of items, which can vary.

What I want to do is to highlight the current item and show all other items as normal. So, when showing the page, the first item should be shown as being highlighted. When clicking on second item,

I would like to be able to do this using nothing but CSS.

To be named, when clicking on a list item I plan to show/hide other div elements, where I plan to use jQuery.

Upvotes: 0

Views: 114

Answers (4)

user2037828
user2037828

Reputation: 70

thanks all to your fast reply.

I finally mix your answers to get it working for me

$(document).ready(function() 
{
    $('div#myclass > ul.myid > li:first').addClass('current'); // set first item 

    $('div#myclass > ul.myid > li').click(function()
    {
        $(this).siblings().removeClass('current');
        $(this).addClass('current');
    });
});

The myclass and myid I've added to distinguish between other list items.

@thecodeparadox: The update when clicking another item was not done with your proposal. @jai: the initial set was not done with your proposal.

But with the final mix, it works 100% as I need.

Thanks a lot again.

Wolfgang

Upvotes: 0

Jai
Jai

Reputation: 74738

Try .addClass() .removeClass() and .eq():

$(function(){
   $('div ul li').eq(1).addClass('active');
   $('div ul li').click(function(){
      $(this).siblings().removeClass('active');
      $(this).addClass('active');
   });
});

As .eq() is 0 indexed so .eq(1) will select the second li on page load.

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

$('li').on('click', function() {
  $('li.highlight').removClass('highlight');  // first un-highlight all lis
  $(this).addClass('highlight');  // then highlight only clicked li
});

To set first item as highlight when page load, you can do it in PHP/ jQuery also.

If you want to do in jQuery then try:

$(document).ready(function() {
    $('div > ul > li:first').addClass('highlight'); // set first item 
                                                // highlight at page load
    $('li').on('click', function() {
      $('li.highlight').removClass('highlight');  // first un-highlight all lis
      $(this).addClass('highlight');  // then highlight only clicked li
    });
});

Upvotes: 2

Mike Brant
Mike Brant

Reputation: 71384

You probably need to add a class name to the li's to give you a convenient selector. In my example below, I have use some_class for this purpose. I am also assuming that you want to use a class the indicate the selected item. In this example, I have used selected as the class name for this.

$('li.some_class').click(function() {
    $('li.some_class').removeClass('selected');
    $(this).addClass('selected');
});

Upvotes: 1

Related Questions