2

我想向选定的“li”添加一个类，同时从先前选择的 li 元素中删除 class:selected。

我已经工作了几个小时，但仍然没有任何运气。我还检查了其他问题，但他们的解决方案对我不起作用。

请帮忙....

<ul id='mainView' class='menu' style='float: left; clear: both;'>      
    <a href="/Link1"><li>Patient</li></a>
    <a href="/Link2"><li>Recommendations</li></a>

</ul>

<script type="text/javascript">
    $(document).ready(function () {
        $('.menu ul a').on('click', function (event) {
            $('.menu ul a.selected').className = '';
            alert($(this).attr('id'));
            $(this).attr('class') = 'selected';
        });
    });

//    $('.menu li').on('click', function () {
//        $('.menu li.selected').className = '';
//        this.className = 'selected';
//    });
</script>

更新：

我确实放了一个里面的li，但是如果我点击li而不是li里面的a，网页不会重定向。这就是为什么我以相反的方式这样做的原因。

更新 2 选定的 li 没有获得“选定”类的原因是因为整个网页被重定向到具有相同导航栏的新页面。所以现在的问题是如何在新网页上突出显示选定的 li（它是在上一页上选择的）。

4

3 回答 3

3

在UL每个人（甚至是浏览器）内部都期望看到一个LI

所以你的HTML：

<ul>
    <li><a href="/Link1">Patient</a></li>
    <li><a href="/Link2">Recommendations</a></li>   
</ul>

还有你的 jQ：

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

构建网页你应该知道如何处理LI元素。简单，例如具有最少样式的虚拟容器。
这意味着您宁愿在元素中添加display:block...float:left和其他很酷的东西，而不是在您的全尺寸可点击<A>元素中设置 a 。padding A

此外（如果您没有时间玩 CSS）来LI 完全可点击使用：

$('ul li').click(function(){
  var goTo = $(this).find('a').attr('href');
  window.location = goTo ;
  // $(this).addClass('selected').siblings().removeClass('selected'); // than you don't need this :D
});

在 OP 后期编辑之后 - 并回答问题

页面刷新后获取哪个是活动的使用：

// ABSOLUTE PATH
var currentPage = window.location;

// RELATIVE PATH
//  var currentPage = window.location.pathname;

$('li a[href="'+ currentPage +'"]').addClass('selected');
于 2013-01-25T00:55:59.063 回答
2 
<script type="text/javascript">
    $(document).ready(function () {
        $('.menu ul a').on('click', function (event) {
            $('.menu ul a.selected').removeClass('selected');
            alert($(this).attr('id'));
            $(this).addClass('selected')
        });
    });
</script>
于 2013-01-25T00:52:01.087 回答
2

试试addClassand removeClass，它们是 jQuery 函数：

$(document).ready(function () {
    $('.menu ul a').on('click', function (event) {
        $('.menu ul a.selected').removeClass("selected");
        $(this).addClass('selected');
    });
});
于 2013-01-25T00:52:21.973 回答