Question

我想在我的网页中使用this菜单。所以我把它包含在index.php

中

但是每次我点击一个菜单并加载一个新页面时，活动菜单样式（.active类）就会消失，并且会转到它的初始样式。因此，用户无法确定他们正在访问的页面。

我想知道我是否可以通过身体类来解决这个问题？例如，我可以说“如果正文类是这样，那么使菜单类处于活动状态”所以我可以更改活动菜单样式并了解我正在访问的页面。

我有3个菜单，每个菜单至少有5个子菜单。

		<?php 
	$pages = array('pageA','pageB','pageC');

		if (!empty($_GET['page'])) {
			
			if(in_array($_GET['page'], $pages)) {
		 		 $page = $_GET['page']; 
				 $id = $_GET['id']; }
			else {
				header("Location:error.php"); 
				} }
		else	{ $page='empty';}		
		?>
	
	<body class = "<?php echo $page $id?>">

这是我的菜单结构：

<ul>
	<li class="active">
	  <h3>pageA</h3>
		<ul>
	    	<li><a href="index.php?pageA&id=1">1</a></li>
			<li><a href="index.php?pageA&id=2">2</a></li>
			<li><a href="index.php?pageA&id=3">3</a></li>
			<li><a href="index.php?pageA&id=4">4</a></li>
			<li><a href="index.php?pageA&id=5">5</a></li>
		</ul>
     </li>
	<li>
	  <h3>pageB</h3>
		<ul>
	    	<li><a href="index.php?pageB&id=1">1</a></li>
			<li><a href="index.php?pageB&id=2">2</a></li>
			<li><a href="index.php?pageB&id=3">3</a></li>
			<li><a href="index.php?pageB&id=4">4</a></li>
			<li><a href="index.php?pageB&id=5">5</a></li>
		</ul>
     </li>    
</ul>

Answer 1

你可以用jQuery试试。

$(document).ready你可以：

var currentPage = window.location.href;
alert(currentPage);// just a test

if(currentPage == "www.stackoverflow.com/rocks"){
    // style the body
}

Answer 2

我对PHP知之甚少，但你应该这样做：

设置一个全局PHP变量，用于设置您所在的页面。

类似$ Global_Page =“Home”;

为每个列表项指定唯一ID以匹配页面名称。

<ul id="nav">
    <li id="Home">
      <h3>pageA</h3>
    </li>
 </ul>

然后使用JS将活动类应用于正确的选项卡，方法是将PHP var传递给它。您应该在nav包含文件中包含这个小脚本。

<script>
$(function(){
var x= //However you render you php var. $Global_Page
$("ul$nav li#"+x).addClass("active");
});
</script>

动态主题类的活动菜单样式

2 个答案: