我想让当前事件的 li 元素在点击时获得一些适当的样式，并在点击其他 li 的元素时将其删除，
我就是靠这个来做的:
$('li').click(function() {
$(this).siblings().removeClass('current');
$(this).addClass('current');
});
如您所见，代码在 jsFiddle 上有效，example on JsFiddle ，除了它对我不起作用，我怀疑这与 Turbolinks 和 Jquery-turbolinks 有关吗？ ，还是只是一些 CSS 问题？
CSS 文件按以下顺序排列:
.current /*I tried sidebar ul li.current but none happened.*/
.sidebar ul li
.sidebar ul li:hover
.sidebar ul li:active
.sidebar ul li a
a
a:hover
更新 #1:我尝试过的解决方案。
$('li').click(function() {
$(this).siblings().removeClass('current');
$(document).on('page:load',function(){
$('li').addClass('current');
});
});
这不是世界上最好的代码，这看起来很错误，但它只是徒劳的随机尝试。
这已经对整个 li 进行了更改(很明显)，在页面加载后，这是一个半解决方案，除了我不知道如何获得点击的 li.
更新#2:Html 代码结构
<body>
<nav class="navbar navbar-default hidden-lg hidden-md" role="navigation" style="margin-bottom:0;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="navbar navbar-nav navbar-right">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- navbar -->
<div class="container-fluid">
<div class="window">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2 hidden-sm hidden-xs" style="padding:0;">
<div class="span2" style="height:5%;">
<div class="topsidebar"></div>
</div>
<div class="span8" style="height:90%;">
<div class="sidebar">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
<div class="span2" style="height:5%;">
<div class="bottomsidebar"></div>
</div>
</div>
<div class="col-sm-10">
<div class="span2" style="height:5%;">
<div class="windowtop" id="u">
</div>
</div>
<div class="span8" style="height:90%;">
<div class="windowmain" style="overflow:auto;">
<%= bootstrap_flash %>
<%= yield %>
</div>
</div>
<div class="span2" style="height:5%;">
<div class="windowbottom"></div>
</div>
</div>
</div>
</div><!-- window -->
</div><!--container-fluid-->
</body>
我的目标是 sidebar div 中的第二个 li。
最佳答案
尝试:
$(document).on("click",".sidebar li",function(){
if (!$(this).hasClass("current")) {
$("li.current").removeClass("current");
$(this).addClass("current");
}
});
这将检查您点击的 li 是否有当前类，如果没有则只触发其他语句
关于javascript - 如果单击其他元素，是否删除类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25084780/