Question

我希望菜单栏根据它所在的页面切换活动类，而不是仅显示home为活动状态，这仍然是非常新的感谢=）（我的网站有智能模板）

<div id='cssmenu'>
<ul>
<li class='active'><a href='http://www.example.com/tour/'><span>Home</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=4'><span>Photos</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=5'><span>Videos</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=59'><span>Webcam</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=58'><span>Archives</span></a></li>

<li><a href='http://www.example.com/tour/pages.php?id=donate'><span>Donate</span></a></li>
<li><a href='http://www.example.com/tour/pages.php?id=join'><span style="color:#EF355C; font-size:20px">JOIN NOW</span></a></li>
<li><a href='http://www.example.com/members/'><span style="font-size:18px">Member Login&nbsp;&nbsp;&nbsp;<img src="/tour/images/locky.png"height="22px" width="22px"></span></a>  </li>

这是我的菜单css，不完全确定你们可能需要这个但是现在就是。

#cssmenu {
background: #FCB9C5;
width: auto;
text-align: center;
}
#cssmenu ul {
list-style: none;
 margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
#cssmenu ul:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
display: inline-block;
padding: 0;
margin: 0;
}
#cssmenu.align-right ul li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu ul li a {
color: #000;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 16px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #fff;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:after {
content: "";
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
#cssmenu ul li a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #333333;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#cssmenu ul li.active a {
color: #fff;
}
#cssmenu ul li.active a:before {
width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
display: block;
}
 #cssmenu.align-right li:first-child a:after {
 display: none;
 }
 @media screen and (max-width: 768px) {
 #cssmenu ul li {
 float: none;
 display: block;
 }
 #cssmenu ul li a {
 width: 100%;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 border-bottom: 1px solid #fb998c;
 }
 #cssmenu ul li.last > a,
 #cssmenu ul li:last-child > a {
 border: 0;
 }
 #cssmenu ul li a:after {
 display: none;
 }
 #cssmenu ul li a:before {
 display: none;
 }
 }

Answer 1

要应用＆＃39;有效＆＃39;类到不同的＆lt; li>你应该执行服务器端更改的元素。

请查看以下页面： http://www.smarty.net/forums/viewtopic.php?p=60336

Answer 2

您需要的是在Smarty选择的页面中分配。

例如：

$smarty->assign('selected_page', 'tour/category.php?id=4');

在PHP中，您可以使用此$_SERVER['REQUEST_URI']变量，可能是这样的：

$smarty->assign('selected_page', substr($_SERVER['REQUEST_URI'],1));

应该可以正常工作。

然后在Smarty：

<div id='cssmenu'>
<ul>
<li {if $selected_page eq 'tour/'}class='active'{/if}><a href='http://www.example.com/tour/'><span>Home</span></a></li>
<li {if $selected_page eq 'tour/category.php?id='}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=4'><span>Photos</span></a></li>
<li {if $selected_page eq 'tour/category.php?id=5'}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=5'><span>Videos</span></a></li>
<li {if $selected_page eq 'tour/category.php?id=59'}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=59'><span>Webcam</span></a></li>
<li {if $selected_page eq 'tour/category.php?id=58'}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=58'><span>Archives</span></a></li>

<li {if $selected_page eq 'tour/pages.php?id=donate'}class='active'{/if}><a href='http://www.example.com/tour/pages.php?id=donate'><span>Donate</span></a></li>
<li {if $selected_page eq 'tour/pages.php?id=join'}class='active'{/if}><a href='http://www.example.com/tour/pages.php?id=join'><span style="color:#EF355C; font-size:20px">JOIN NOW</span></a></li>
<li {if $selected_page eq 'members/'}class='active'{/if}><a href='http://www.example.com/members/'><span style="font-size:18px">Member Login&nbsp;&nbsp;&nbsp;<img src="/tour/images/locky.png"height="22px" width="22px"></span></a>  </li>

编辑当然，如果您使用url和锚文本将这些菜单数据放入PHP中的数组会更好。然后在Smarty中你可以使用循环来显示菜单，当你将$selected_page与链接网址进行比较时，你不需要两次写网址

菜单栏活动类Smarty模板

2 个答案: