php - 一次更改多个元素的类

Question

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

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

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

该数组包含有限数量的元素，这些元素可能会有所不同。

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

• 第一项不应突出(没有任何样式)。
• 第二个元素应该突出显示，直到另一个元素被点击。
• 所有其他元素应显示为正常样式。

我希望只使用 CSS 就能做到这一点。

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

Answer 1

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

要在页面加载时将第一项设置为 highlight，您也可以在 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
    });
});