Php 一次更改多个元素的类

我站在森林前面。你能帮我找到那棵树吗

目前我正在用PHP生成一个列表

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

echo'；
回声“
”；
foreach（$myArray作为$key=>$value）：
回音“
”$价值。”'；
endforeach；
回声“
”；
回声'；

数组包含数量有限的项，这些项可能会有所不同

我想做的是突出显示当前项目，并正常显示所有其他项目。 因此，在显示页面时，第一项应显示为高亮显示。 单击第二项时

• 第一项不应突出（没有任何样式）
• 第二项应高亮显示，直到单击另一项
• 所有其他项目应显示为正常样式

我想能够做到这一点，只使用CSS

要命名，当单击列表项时，我计划显示/隐藏其他div元素，其中我计划使用jQuery

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

要在页面加载时将第一项设置为“突出显示”，也可以在PHP/jQuery中进行

如果要在jQuery中执行此操作，请尝试：

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

要在页面加载时将第一项设置为“突出显示”，也可以在PHP/jQuery中进行

如果要在jQuery中执行此操作，请尝试：

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

请尝试

.addClass（）.removeClass（）

和

.eq（）

：

由于

.eq（）

是

0

索引的，因此

.eq（1）

将在页面加载时选择第二个li

尝试

.addClass（）.removeClass（）

和

.eq（）

：

---

由于

.eq（）

是

0

索引的，因此

.eq（1）

将在页面加载时选择第二个li

您可能需要在

li

中添加一个类名，以便为您提供一个方便的选择器。在下面的示例中，我使用了

some_class

。我还假设您希望使用一个类来指示所选项目。在本例中，我使用了

selected

作为该类的类名

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

---

您可能需要将类名添加到

li

，以提供一个方便的选择器。在下面的示例中，我使用了

some_class

。我还假设您希望使用一个类来指示所选项目。在本例中，我使用了

selected

作为该类的类名

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

---

谢谢你的快速回复

我终于混合了你的答案，让它为我工作

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

我添加的myclass和myid用于区分其他列表项

@CodeParadox：单击其他项目时的更新未与您的提案一起完成。 @jai:你的提案没有完成最初的设定

但在最后的混音中，它能100%满足我的需要

再次非常感谢

---

沃尔夫冈

感谢您的快速回复

我终于混合了你的答案，让它为我工作

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

我添加的myclass和myid用于区分其他列表项

@CodeParadox：单击其他项目时的更新未与您的提案一起完成。 @jai:你的提案没有完成最初的设定

但在最后的混音中，它能100%满足我的需要

再次非常感谢

---

Wolfgang

谢谢，即使我最后没有使用你的解决方案。谢谢，即使我最后没有使用你的解决方案。