添加类导航菜单
考虑的情况下,我有以下菜单:添加类导航菜单
<ul>
<li><a href="index.php">Index</a></li>
<li><a href="about.php">About</a></li>
<li><a href="test.php">Test</a><li>
</ul
和菜单位于header.php文件。对于每个页面(Index,About,Test),我都有index.php,about.php和test.php,并且所有这些文件都包含header.php!
我需要的是当我们在不同的页面上时向li添加一个类。所以如果我们在about.php上,应该在第二个里面添加这个类。
有没有办法处理jQuery,或者有什么办法来解决这个问题?
我用这样的事情在我的静态HTML网站之一,它可以适应:
<div id="navigation">
<?php $currentPath = $_SERVER['REQUEST_URI']; ?>
<?php $currentClass = ' class="current"'; ?>
<ul id="nav">
<li<?php if($currentPath == "/") { echo $currentClass; } ?>><a href="/">Home</a></li>
<li<?php if($currentPath == "/market-challenge/") { echo $currentClass; } ?>><a href="/market-challenge/">Market <br />Challenge</a></li>
<li<?php if($currentPath == "/environmental-benefits/") { echo $currentClass; } ?>><a href="/environmental-benefits/">Environmental <br />Benefits</a></li>
<li<?php if($currentPath == "/technology/") { echo $currentClass; } ?>><a href="/technology/">Technology</a></li>
<li<?php if($currentPath == "/contact/") { echo $currentClass; } ?>><a href="/contact/">Contact</a></li>
</ul>
</div>
享受!
每个李标签制作独一无二的标识,当链路是,如果使用jQuery .attr功能
<ul>
<li><a href="index.php" <?php if($_SERVER['PHP_SELF']=="/index.php") echo 'class="someclass"'; ?> >Index</a></li>
<li><a href="about.php" <?php if($_SERVER['PHP_SELF']=="/about.php") echo 'class="someclass"'; ?> >About</a></li>
<li><a href="test.php" <?php if($_SERVER['PHP_SELF']=="/test.php") echo 'class="someclass"'; ?> >Test</a><li>
</ul>
这可能不是最好的方法上的变化单击类,但它的任务服务器端。
敢肯定它必须是$ _ SERVER [“PHP_SELF”] ==“的index.php”等虽然。 – 2012-07-20 12:54:00
@MrAzulay取决于文件的位置。如果他们被访问为:'http:// localhost/index.php',那么它将如我所述。 – hjpotter92 2012-07-20 12:57:31
不,只是测试它。 – 2012-07-20 13:02:22
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
jQuery('.nav li').each(function() {
var href = jQuery(this).find('a').attr('href');
if (href === window.location.pathname) {
jQuery(this).addClass('active');
}
});
});
</script>
将'.nav li'替换为更适合您的DOM结构的内容。如果您的包装div有一类菜单,请执行:jQuery('.menu li')
这是一个很好的客户端解决方案。虽然我不会做这样的客户端任务,但很好的答案。 – 2012-07-20 12:55:46
添加存储当前页面的会话变量(包括头文件之前)。在头文件中检查这个值并分配类。如果在我看来,更干净的代码
$_SESSION['currentPage'] = 'index';
$_SESSION['currentPage'] = 'about';
$_SESSION['currentPage'] = 'test';
在头部,
<ul>
<li><a href="index.php" <?php if($_SESSION['currentPage']=="index") echo 'class="selected"' ?>>Index</a></li>
<li><a href="about.php" <?php if($_SESSION['currentPage']=="about") echo 'class="selected"' ?>>About</a></li>
<li><a href="test.php" <?php if($_SESSION['currentPage']=="test") echo 'class="selected"' ?>>Test</a><li>
</ul>
为什么要将它存储在会话中? – 2012-07-20 13:09:11
使用速记。
<?php $self = $_SERVER['PHP_SELF']; ?>
<ul>
<li><a href="index.php" <?php echo ($self == "/index.php" ? 'class="selected"' : ''); ?>>Index</a></li>
<li><a href="about.php" <?php echo ($self == "/about.php" ? 'class="selected"' : ''); ?>>About</a></li>
<li><a href="test.php" <?php echo ($self == "/test.php" ? 'class="selected"' : ''); ?>>Test</a></li>
</ul>
对于上述问题,我已经完成了使用jQuery的codebins的解决方案。
DEMO:http://codebins.com/bin/4ldqpa4
在这里,我所提到的步骤,上述溶液中执行。
1)在标题标签中包含最新的jQuery.js和querystring-0.9.0.js javascript文件。
2)HTML
<div id="panel">
<ul class="menu">
<li>
<a href="#?page=0">
Index
</a>
</li>
<li>
<a href="#?page=1">
About
</a>
</li>
<li>
<a href="#?page=2">
Test
</a>
<li>
</ul>
</div>
3)CSS
ul.menu{
border:1px solid #112266;
background:#ccc;
}
ul.menu li{
list-style:none;
display:inline-block;
margin-left:10px;
padding:0px;
width:60px;
text-align:center;
}
ul.menu li:hover{
background:#343434;
}
ul.menu li a{
padding:0px;
color:#113399;
text-decoration:none;
}
ul.menu li:hover a{
color:#c6b744;
text-decoration:underline;
}
ul.menu li.active{
background:#343434;
}
ul.menu li.active a{
color:#c6b744
}
4)的jQuery:
$(function() {
$(".menu li").click(function() {
setTimeout(function() {
var page = $.QueryString("page");
$(".menu li").removeClass("active");
$(".menu li:eq(" + page + ")").addClass("active");
}, 200);
});
});
在上述方案中,我必须设置像#的href链接?页=因为箱来运行新的页面重定向Java脚本是不可能的垃圾箱以及我必须使用setTimeout函数,因为当前页面不是重定向只是#更改同一页上的查询字符串?页=。
如果你想在你的项目,然后把上面的jQuery脚本共同的地方,以便在将执行每个菜单链接,并设置与活动类当前页面的链接使用上面的解决方案。
注意:删除setTimeout函数包装只是不停地有代码行脚本里面。它看起来像如下:
$(function() {
$(".menu li").click(function() {
var page = $.QueryString("page");
$(".menu li").removeClass("active");
$(".menu li:eq(" + page + ")").addClass("active");
});
});
你为什么要这么做?好像你是复杂 – 2012-07-20 12:49:29
是的,你可以添加类使用JavaScript,但不会是更容易产生对服务器端的一些问题? – Leri 2012-07-20 12:49:52
根据你需要什么类的我会按照@PLB的建议添加与PHP服务器端的类。 – 2012-07-20 12:51:03