2012-07-20 242 views
4

考虑的情况下,我有以下菜单:添加类导航菜单

<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,或者有什么办法来解决这个问题?

+0

你为什么要这么做?好像你是复杂 – 2012-07-20 12:49:29

+1

是的,你可以添加类使用JavaScript,但不会是更容易产生对服务器端的一些问题? – Leri 2012-07-20 12:49:52

+0

根据你需要什么类的我会按照@PLB的建议添加与PHP服务器端的类。 – 2012-07-20 12:51:03

回答

4

我用这样的事情在我的静态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> 

享受!

2

每个李标签制作独一无二的标识,当链路是,如果使用jQuery .attr功能

6
<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> 

这可能不是最好的方法上的变化单击类,但它的任务服务器端。

+1

敢肯定它必须是$ _ SERVER [“PHP_SELF”] ==“的index.php”等虽然。 – 2012-07-20 12:54:00

+0

@MrAzulay取决于文件的位置。如果他们被访问为:'http:// localhost/index.php',那么它将如我所述。 – hjpotter92 2012-07-20 12:57:31

+0

不,只是测试它。 – 2012-07-20 13:02:22

2
<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')

+0

这是一个很好的客户端解决方案。虽然我不会做这样的客户端任务,但很好的答案。 – 2012-07-20 12:55:46

2

添加存储当前页面的会话变量(包括头文件之前)。在头文件中检查这个值并分配类。如果在我看来,更干净的代码

$_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> 
+0

为什么要将它存储在会话中? – 2012-07-20 13:09:11

2

使用速记。

<?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> 
2

对于上述问题,我已经完成了使用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"); 
     }); 
});