Question

我有一个有效的主题标签链接系统，我基本上想要设置<li>的样式，告诉用户使用background和color他们在哪个页面。当您单击另一个列表项时，jQuery会将上一页<li> CSS更新回正常状态。

我怎样才能做到这一点？

jQuery代码：

function Init(){
 ShowPage ('#body_home');
}

 function ShowPage(a){
  $(a).css("display","block");
 }

 $(document).ready(function(){
   $("a").click(function(e){
       if(window.location.href!= 'index.php'){
        window.location.href== 'index.php';
      }else{
        noop();
      }
      $(".page").fadeOut(1000).delay(1500);
      $("#" + $(this).data("page")).fadeIn(1000); e.preventDefault(); return       false;
   });
});

HTML code：

<ul class="navlist">
    <li><a href="index.php">Home</a></li>
    <li><a href="hello.php">Hello</a></li>
</ul>

Answer 1

我已经简化了这个答案，以针对我认为您正在寻找的特定行为，但您应该能够针对您的具体情况实施该行为。

我会创建一个类并将其命名为.selected或.active，并为其指定所需的样式。例如：

.selected {
    background: #f4a;
    color: #fff;
}

单击某个项目时，使用jQuery将该类添加到该项目，并从所有其他项目中删除该类。为简单起见，以下示例假定样式将应用于锚点，而不是列表项：

$('a').click( function() {
    $('a').not(this).removeClass('selected');
    $(this).addClass('selected');
});

定位父li会稍微复杂一点，但解决方案是一样的。

Here's a fiddle demonstrating this solution

Jquery Hashtag链接系统（显示用户所在的页面）

1 个答案: