Fatal编程技术网

需要CSS和Javascript的帮助吗

javascript jquery html css ruby-on-rails

需要CSS和Javascript的帮助吗,javascript,jquery,html,css,ruby-on-rails,Javascript,Jquery,Html,Css,Ruby On Rails,在我的RubyonRails应用程序中，我终于找到了一个边栏。现在，我只是对背景悬停颜色有问题。我不太确定如何改变这一点。以下是迄今为止侧边栏的CSS： body,html,.row-offcanvas { height:100%; } body { padding-top: 50px; } #sidebar { width: inherit; min-width: 220px; max-width: 220px; background-color:#fff; f

在我的RubyonRails应用程序中，我终于找到了一个边栏。现在，我只是对背景悬停颜色有问题。我不太确定如何改变这一点。以下是迄今为止侧边栏的CSS：

body,html,.row-offcanvas {
  height:100%;
}

body {
  padding-top: 50px;
}

#sidebar {
  width: inherit;
  min-width: 220px;
  max-width: 220px;
  background-color:#fff;
  float: left;
  height:100%;
  position:relative;
  overflow-y:auto;
  overflow-x:hidden;
}

#main {
  height:100%;
  overflow:auto;
}

/*
 * off Canvas sidebar
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    width:calc(100% + 220px);
  }

  .row-offcanvas-left
  {
    left: -220px;
  }

  .row-offcanvas-left.active {
    left: 0;
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
  }
}
以下是_sidebar.html.erb部分，它将呈现到我的rails应用程序的每个页面中：

  <div id="sidebar" class="sidebar-offcanvas">
      <div class="col-md-12">
        <h3></h3>
        <ul class="nav nav-pills nav-stacked">
          <li class="active"><a href="#">Section</a></li>
            <li><%= link_to 'Customers', Customers_path %></li>
            <li><%= link_to 'Projects', projects_path %></li>
        </ul>
      </div>
  </div>
这些类并没有像看上去应该的那样进行切换。因此，我有两个问题希望有人能帮我解决：1当我突出显示链接时，我似乎无法更改悬停/文本的颜色；2当我单击其中一个链接时，我无法切换class=active

这两个例子都来自：

编辑：根据要求，以下是页面的输出：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <link data-turbolinks-track="true" href="/assets/bootstrap_custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/customers.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/projects.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
  <meta content="authenticity_token" name="csrf-param" />
<meta content="6nUnsGwrHCTVOf/90d6aHJrG+m7lnv7g2MpOix06j2M=" name="csrf-token" />
</head>
<body>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div><!--/.nav-collapse -->
</div><!--/.navbar -->

<div class="row-offcanvas row-offcanvas-left">
      <div id="sidebar" class="sidebar-offcanvas">
      <div class="col-md-12">
        <h3></h3>
        <ul class="nav nav-pills nav-stacked">
            <li><a href="/customers">Customers</a></li>
            <li><a href="/projects">Projects</a></li>
        </ul>
      </div>
  </div>
  <div id="main">
    <div class="col-md-12">
        <h1 align="center" class="page-header"></h1>
#deleted this part for example #
</table>
    </div>
  </div>
</div><!--/row-offcanvas -->
        <script type='text/javascript'>

            $(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
});

        </script>

</body>
</html>
我们需要查看erb的HTML输出

此外，我没有看到此jquery选择器适用于以下任何代码：
$'[data toggle=offcanvas]'

引导通常被设计为使用您想要的任何设置来覆盖

#sidebar > div > ul > li:hover { 
    color: black; 
    background-color: gray; 
}
应该可以帮你解决这个问题——用你想要的任何颜色替换黑色和灰色

以下是链接代码的答案：

#sidebar > div > ul > li:hover { 
    color: black; 
    background-color: gray; 
}

$(document).ready(function() {
  $('#sidebar .nav-pills a').click(function() {
    $('#sidebar .nav-pills li.active').removeClass('active');
    $(this).parent().addClass('active');
  });
});
对于初学者来说，没有定义[data toggle]属性，因此从未调用您的单击处理程序。第二，按照你编写类切换的方式，每个按钮都会切换，你总是有一个按钮处于活动状态，其余的不处于活动状态，或者除了那个按钮处于活动状态和那个按钮不处于活动状态之外的所有按钮。

试试看

 .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
    color: red!important;
    background-color: yellow!important;
    }
请添加上面的css，让我知道它的悬停问题是否解决

javascript

 $('#sidebar .nav-pills a').click(function() {
        $('#sidebar .nav-pills li.active').removeClass('active');
        $(this).parent().addClass('active');
      });
检查这个，让我知道它是罚款悬停链接？？嘿，曼朱纳。在本例中，我已经用CSS替换了我的整个部分，但是悬停背景颜色仍然比整个侧边栏略为灰色，链接文本颜色仍然为白色。谢谢你。看起来这改变了顶部栏的背景颜色，而不是侧边栏。请检查答案。嗯，这对我来说也没有任何改变。我可以在这里看到一个小差异。几乎只有四个角是黑色的，但悬停链接的主背景色仍然是灰色的。@user3447014背景色根据此代码将是灰色的-将灰色更改为任何其他颜色，它将更改背景色。是的，我已尝试将两者都设置为红色，背景颜色对我来说仍然是灰色的。将我的评论编辑到顶部以包含HTML页面的输出。谢谢，但我不想更改导航栏的颜色。我正在尝试更改侧边栏的颜色。为什么要使用！这里很重要！在不了解问题所在的情况下，不应使用“重要信息”。如果我要将此信息添加到页面底部的标记中，这对我来说没有任何改变。我为我缺乏知识而道歉-对JS不是很有经验。通过编写类切换，您是指已随节链接提供的活动类吗？这一行代码是单击切换：$'[data toggle=offcanvas]'{也就是说，它正在查找这样构造的元素：您提供的代码中没有包含“data toggle”的元素，因此不会触发click事件。$'.row offcanvas'。toggleClass'active'；此行将查找包含类row offcanvas的所有元素。对于它找到的每一个元素，如果没有类处于活动状态时，它将添加它。如果它具有活动类，它将删除它。对于按钮，我们假设第一个按钮已处于活动状态。当该行被触发时，您的第一个按钮将不处于活动状态，而其他每个按钮都将处于活动状态，无论您单击哪个按钮。明白了。有意义。我已删除了第一个按钮，即w设置为“活动”，因此默认情况下没有一个设置为“活动”。但是，由于某些原因，当我单击其中一个链接时，它仍然没有将任何内容设置为“活动”。我是否仍然缺少已经提到的内容？你能发布一个小提琴或仅此页面的内容吗？考虑到你在上面输入的输出，该代码应该可以工作。尽管我可以不要误解你要换的按钮。