为什么要给单个li元素一个主导航栏？

Question

我在某些大型网站上阅读HTML只是为了了解其他人如何汇总代码。在playmonopoly.us（以及许多其他站点）上，主导航栏使用li类创建。

问题：

• 如果li元素只是主导航栏上的几个元素中的一个，为什么有人想为每个li元素使用一个类？
• 为每个li提供课程有什么确切的好处？

为每个ul提供一个类更有意义，然后如果样式化li元素是创建类的目标，那么在CSS中定位每个ul？整个li类的东西我错过了什么？

Answer 1

为导航li提供类的一个作用是显示哪个li是用于页面导航的活动的li。这可能是不同的colouor或不同的背景，以证明链接是活动页面。

这可以在php中轻松完成，其中活动页面在调用header / nav之前被命名。

例如 - 设置活动页面变量：

<?php $activePage="home";?>

//与导航菜单相关的其他代码 //包含公共标题/导航文件

<li class="<?php if($activePage =="home"){echo"active";}?>"><a href="index.php">HOME</a></li>

这样做是允许一个常见的中间菜单，然后指示您所在的活动页面，因此可以相应地设置样式。如果导航菜单中的每个页面都是活动页面，则它们可以具有活动类。因此，根据activePage类的设置，有一个导航菜单在不同的页面上执行不同的操作。

顺便说一下，如果页脚中有导航元素，也可以在页脚中使用$ activePage变量 - 因此可以在页面的顶部和底部设置活动页面链接的样式。

Answer 2

为每个li提供课程的另一个原因是在导航中使用javascript / jquery：

如果您正在进行大量操作，性能可能会成为一个问题，因此不要编写

ul.main-nav > li

一直以来，你最好用：

.main-nav-item

Answer 3

以后编写脚本可能会有用。 这取决于你的喜好。 您可以为<ul>或<ol>设置ID或类，然后使用<li>选项设置li:nth-child()的样式。 如果您需要相同的参数，并且每次都可以通过定义类来键入<li>，那么您将能够对所有li:nth-child()进行样式化。