根据页面名称添加类元素 [英] Add class element based on the name of the page
本文介绍了根据页面名称添加类元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个网站有5个导航部分。
I have a little website with 5 nav sections.
为了避免更改每个页面的代码，当我要添加一个部分，我使用一个php包括
For avoid change the code on every page when I have to add one more sections, I use a php include on the nav section of every page.
现在我需要根据访问的页面添加类selected到列表项（li）。 ¿怎么做？因为现在nav是唯一的。
Now I need to add class "selected" to the list item (li) depending the page visited. ¿How to do this? Because now the nav is unique.
这是代码
<nav>
<ul>
<li class="selected"><a href="index.php">Home</a></li>
<li><a href="biography.php">Bio</a></li>
<li><a href="photo.php">Photo</a></li>
<li><a href="work.php">Work</a></li>
<li class="last"><a href="contact.php">Contact</a></li>
</ul>
<div class="clear"></div>
</nav>
$ b
谢谢！
Thanks!
推荐答案
这里是简单的方法，纯CSS不需要任何编程：添加一个ID到你的身体和你的链接：
Here's the easy way to do it, pure CSS no need for any programming: Add an ID to your body and your links:
<body id='home'>
<nav>
<ul>
<li id='home-link'><a href="index.php">Home</a></li>
<li id='bio-link'><a href="biography.php">Bio</a></li>
<li id='photo-link'><a href="photo.php">Photo</a></li>
<li id='work-link'><a href="work.php">Work</a></li>
<li id='contact-link'class="last"><a href="contact.php">Contact</a></li>
</ul>
<div class="clear"></div>
</nav>
现在，你的样式如下：
#home #home-link, #bio #bio-link, #photo #photo-link, #work #work-link, #contact #contact-link{
//however you would have styled .active
}
这篇关于根据页面名称添加类元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
