- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个侧边栏,其中包含“客户”、“项目”等链接。它们链接到相应的页面。但是,我希望能够设置 <li class="active">
对于我点击的任何菜单项,无论是项目还是客户。
这是侧边栏 HTML (Ruby on Rails):
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<h3></h3>
<ul class="nav nav-pills nav-stacked">
<li><%= link_to 'Customer Management', customers_path %></li>
<li><%= link_to 'Project Management', projects_path %></li>
</ul>
</div>
</div>
这是该 HTML 下的 JavaScript:
<script type='text/javascript'>
$(document).ready(function() {
$('#sidebar .nav-pills a').click(function() {
$('#sidebar .nav-pills li.active').removeClass('active');
$(this).parent().addClass('active');
});
});
</script>
当我点击“客户”页面时,没有任何反应。但是,如果我设置第一个 <li>
到事件类,然后我可以看到应用于它的 class="active"CSS 样式。
这是其背后的 CSS:
body,html,.row-offcanvas {
height:100%;
}
body {
padding-top: 50px;
}
#sidebar {
width: inherit;
min-width: 220px;
max-width: 220px;
background-color:#E6E5E5;
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 a:hover {
background-color:#6699FF;
}
最佳答案
下面是我用来向导航中与当前 URL 匹配的项目添加类的一些 JavaScript:
// Get current page and set current in nav
$(".nav>li").each(function() {
var navItem = $(this);
if (navItem.find("a").attr("href") == location.pathname) {
navItem.addClass("active");
}
});
该代码应该几乎可以在您的页面中逐字运行。基本上它只是循环遍历 nav
中的所有 li
项目,如果它发现一个具有指向当前页面的超链接,它将应用一类 active
到列表项。
关于jquery - 单击后将侧边栏事件菜单项设置为类 ="active",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26494735/
我对 Android 很陌生,如果问题重复,请避免并发送链接。有三个 Activity A、B 和 C。 Activity A 获取一个用户名,我想在 Activity C 中显示该用户名,但我想先运
我正在尝试制作记事本应用程序,因此每次打开新笔记时,布局都会相同。另外, Activity 的数量(新注释)不应定义得尽可能多 最佳答案 如果 Activity 始终相同,您可能应该创建一个适配器,允
我有 3 个 Activity 。 主窗口 5 个按钮 在按钮的主窗口中按下此窗口打开(将其称为父窗口) 在父窗口按钮上按下此窗口打开调用它作为结束子窗口。 现在从子窗口我从父窗口获取值如下:
我遇到了一个 Activity backstack 问题。假设我的后台有 5 个 Activity :比如 Activity A、 Activity B、 Activity C、 Activity D
我正在寻找必须具有以下附加特征的 JMS 提供程序: 采用多代理,所有代理都必须处于事件状态(无单点故障) 仅在两台机器上进行扩展就足以满足我们的需求 能够保证订购(如果 1 个生产者 + 1 个消费
假设,我有一个由 TabHost 组成的选项卡 Activity 。 TabHost 包含 2 个选项卡,每两个选项卡都有一个 Activity 组。每个 Activity 组包含一项 Activit
我正在开发一个应用程序,我需要根据某些操作导航到特定 Activity 。这是一张图片 我的第一个 Activity 是 ReadingActivity。基于某些操作,用户将被带到 NewProjec
我创建了一个与服务器异步通信的应用程序。当应用程序发出服务器请求时,将创建一个带有“正在加载”通知的新对话框( Activity )。主要 Activity 实现了处理服务器响应的方法,我想在主要 A
我想在我的所有应用程序 Activity 中显示相同的选项菜单。我创建了一个实现菜单的通用 Activity ,并且我所有的进一步 Activity 都扩展了它。 问题:当我需要扩展其他特定 Acti
我有四个 Activity ,即 java 文件 - Activity1.java、activity2.java、activity3.java、activity4.java 和 xml 文件 - Ac
我有两个 Activity 。我想将数据从第二个 Activity 发送到上一个 Activity 。第一个 Activity 有自定义 ListView 和 bean 类。当我点击第二个 Activ
根 Activity 是堆栈中当前的第一个 Activity 还是 list 中指定为启动 Activity 的 Activity ? 支持应用程序 P 在启动时启动 Activity A。然后 A
你好 我想知道您在绘制 Activity 图选择“Activity ”时考虑了哪些关键点? 您如何从要建模的问题中选择 Activity ? 谢谢 最佳答案 Activity 图用于对正在开发的系统和
如何从主 Activity 启动 Activity 并在子 Activity 返回主 Activity 中退出操作后返回主 Activity ? 我已将子 Activity 作为启动器 Intent
我的工作流程如下: 登录 Activity -> ActivityB -> ActivityC -> ActivityD 我想将数据从LoginActivity传递到ActivityD,但不直接传递到
我之前曾尝试获得此问题的答案,但找不到可以解决我的问题的答案。我正在制作保存圆盘高尔夫球分数的应用程序。我的 MainActivity 有 4 个按钮。新比赛、恢复比赛、类(class)和球员。 At
我有一个 tts 非 UI 类和 Activity 类。现在在 Activity 类中,我有一个按钮,用户可以从中选择男声或女声,具体取决于我想要将字符串传递给 tts 类的选择,然后一次tts 类根
问题有点复杂,首先, Activity A 和 Activity B 的 list 中都有 android:noHistory = true 。我有一个自定义 serialized 类,假设 MyCl
在我的应用程序中,我有两个 Activity (AuthenticationActivity 和 MainActivity),每个 Activity 都有一个导航图和大量 fragment 。我创建了
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: How can i use compose email activity in tabView? 我想在选项
我是一名优秀的程序员,十分优秀!