javascript - 如何将类添加到选定的 li 元素上并使 li 全尺寸可点击

Question

我想向选定的“li”添加一个类，同时从先前选定的 li 元素中删除该类: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没有获得“selected”类的原因是因为整个网页被重定向到具有相同导航栏的新页面。那么现在的问题是如何在新网页上突出显示选中的li(在上一页中选中的)。

Answer 1

在 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>元素，而不是设置 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');