Question

我想让当前活动的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>

我定位的是li div中的第二个sidebar。

Answer 1

尝试：

$(document).on("click",".sidebar li",function(){
  if (!$(this).hasClass("current")) {
    $("li.current").removeClass("current");
    $(this).addClass("current");
  }
});

这将检查您点击的li是否具有当前课程，如果不是，则仅触发其他语句

Answer 2

在turbolinks处于活动状态时，您需要在与$(document).ready(...)不同的事件上绑定您的事件处理程序：

$(document).on 'page:change', ->
  $('li').click(function() {
    $(this).siblings().removeClass('current');
    $(this).addClass('current');
  });
}

请参阅此处的其他页面生命周期事件的turbolinks文档：https://github.com/rails/turbolinks

如果单击其他元素，则删除类？

2 个答案: