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

Answer 2

尝试.addClass() .removeClass()和.eq()：

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

由于.eq()被0编入索引，因此.eq(1)将在页面加载时选择第二个li。

Answer 3

您可能需要在li中添加一个类名，以便为您提供方便的选择器。在下面的示例中，我使用some_class来实现此目的。我还假设您要使用一个类来指示所选项目。在此示例中，我使用selected作为此类的名称。

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

Answer 4

感谢您的快速回复。

我最后将你的答案混合起来让它为我工作

$(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以区分其他列表项。

@thecodeparadox：点击其他项目时的更新未完成您的提案。 @jai：你的提案没有完成初始设置。

但是最终的组合，它可以100％正常工作。

再次感谢。

沃尔夫冈

一次更改多个元素的类

4 个答案: