Change Class of Multiple Elements at Once - php

Question

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,
the first item should not stick out (not have any styling).
the second item should be highlighted until another item is clicked.
all other items should be shown as a normal styling.
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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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