使用twitter bootstrap,我需要启动主导航的li部分的活动类.自动的.我们使用php而不是ruby.
示例导航:
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/forums">Forums</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/faqs.php">FAQ's</a></li>
<li><a href="/item.php">Item</a></li>
<li><a href="/create.php">Create</a></li>
</ul>
Bootstrap代码如下:
<li class="active"><a href="/">Home</a></li>
因此,只需要弄清楚如何将活动类附加到当前页面.看了几乎所有关于Stack的答案,没有真正的快乐.
我玩过这个:
/*menu handler*/
$(function(){
var url = window.location.pathname;
var activePage = url.substring(url.lastIndexOf('/')+1);
$('.nav li a').each(function(){
var currentPage = this.href.substring(this.href.lastIndexOf('/')+1);
if (activePage == currentPage) {
$(this).parent().addClass('active');
}
});
})
但没有快乐.
我有一个html作为侧边栏,并使用Bootstrap.
<ul class="nav nav-list">
<li class="active"><a href="/">Link 1</a></li>
<li><a href="/link2">Link 2</a></li>
<li><a href="/link3">Link 3</a></li>
</ul>
我打算做点什么:
当我click链接3之类的链接时,page content将更改为链接3的内容,链接3将具有类active,并删除链接1中的活动clss.
我认为这可以实现jQuery,我在SO中搜索了很多问题,例如:
我用这个脚本:
$(document).ready(function () {
$('.nav li').click(function(e) {
$('.nav li').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
//e.preventDefault();
});
});
但是大多数人都使用preventDefault,这将阻止继续行动.因此它无法更改为Link 3的页面内容.
如果我删除了preventDefault语句,当页面加载Link 3的内容时,活动类将返回到Link 1.
那么有什么方法可以解决这个问题吗？
这是HTML我为导航栏创建的代码bootstrap.
<div id="menu">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">videos</a></li>
<li><a href="#">Comment</a></li>
<li><a href="#">About</a></li>
<li ><a href="contact_us.html">Contact</a></li>
</ul>
</div>
现在我需要添加此li的active动态类的菜单项时页面打开.
我只是检查这两个stackoverflow问题:一个 | 二
但我无法弄清楚这一点.
这是我的javascript -
$('#menu > ul.navbar-nav li').click(function(e) {
$('.navbar li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
希望有人能帮助我.谢谢.
我使用bootstrap twitter,我希望菜单中的不同网站在点击时显示为活动状态.我发现了Bootstrap Twitter CSS Active Navigation这个问题来处理这个问题.
我的问题是我无法在其中一个答案中使用JQuery函数.修改应该非常直接,以使其在我的情况下工作,在HTML中是:
<script>
$('body').on('.nav li a', 'click', function()
{
var $thisLi = $(this).parents('li:first');
var $ul = $thisLi.parents('ul:first');
if (!$thisLi.hasClass('active'))
{
$ul.find('li.active').removeClass('active');
$thisLi.addClass('active');
}
});
</script>
<ul class="nav nav-pills pull-left">
<li class="active"> <a href="home.html">Home</a> </li>
<li> <a href="about.html">About</a> </li>
</ul>
关于可能出现什么问题的任何线索？先感谢您.
我是 HTML 和 JavaScript 的新手，现在我面临一个问题，我认为你们中的许多人一直在处理自己的问题。
我有一个导航栏，当我单击不同的页面引用时，默认情况下它不会更改活动状态。
“主页”导航项默认处于活动状态，我想在单击其他导航项时更改活动状态。但我不知道该怎么做？据我所知，这不是太多的代码行，但我很想在这里得到一些帮助。
这是我的代码：
<head>
<meta charset="UTF-8">
<title>MaU Movie database</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://bootswatch.com/4/cyborg/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="mumdblogo.png">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html" id="movielogo"><img src="moviefylogo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="library.html">Library</a>
</li>
<li class="nav-item">
<a class="nav-link" href="uploads.html">Uploads</a>
</li> …