0

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

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

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

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

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

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

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

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

4

4 回答 4

2 
$('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
    });
});
于 2013-02-18T17:53:34.290 回答
1

尝试.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。

于 2013-02-18T17:54:59.480 回答
1

您可能需要在li's 中添加一个类名，以便为您提供方便的选择器。在下面的示例中，我已some_class用于此目的。我还假设您想使用一个类来指示所选项目。在这个例子中，我使用selected了这个类名。

$('li.some_class').click(function() {
    $('li.some_class').removeClass('selected');
    $(this).addClass('selected');
});
于 2013-02-18T17:56:12.580 回答
0

感谢您的快速回复。

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

$(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% 满足我的需要。

再次非常感谢。

沃尔夫冈

于 2013-02-18T18:33:04.793 回答