我想向选定的“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(在上一页中选中的)。
最佳答案
在 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');
关于javascript - 如何将类添加到选定的 li 元素上并使 li 全尺寸可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14513574/