Question

我正在学习HTML + CSS并在一个网站上工作，我需要在左侧有一个垂直导航栏，它有四个可以与之交互的元素。标准做法是用div包装这四个元素中的每一个，还是有更优雅或语义的方法来解决这个问题？我希望每个元素都有与它们相关的独特的on-click函数，这就是为什么我认为给它们div和类最适合以后与它们进行交互。

谢谢！

Answer 1

JSFIDDLE DEMO

HTML结构：
有很多方法可以实现垂直导航最常见的是使用ul和li：

<div id="lnav_container">
    <ul id="lnav">
        <li class="lnav_item"><a href="#">Item 1</a></li>
        <li class="lnav_item"><a href="#">Item 2</a></li>
        <li class="lnav_item"><a href="#">Item 3</a></li>
        <li class="lnav_item"><a href="#">Item 4</a></li>
    </ul>
</div>

a内有li个标签也很常见。

<强>样式：
您可以list-style-type: none;使用ul来摆脱子弹通过使用:hover选择器使其更具交互性，您可以在悬停时为它们提供不同的样式。

.lnav_item {
    width: 74%;
    margin-top: 10px;
}
.lnav_item:first-child {margin-top: 0px;}
.lnav_item.selected {width: 86%;}
.lnav_item a {
    display: inline-block;
    width: 100%;
    line-height: 30px;
    padding: 8px 5px 5px 0px;
    background-color: yellow;
    color: black;
    font-weight: bold;
    text-decoration: none;
    border-radius: 2px 12px 12px 2px;
}
.lnav_item.selected a {
    background-color: green;
    color: white;
    font-size: 18px;
}
.lnav_item:hover a {background-color: orange;}

如果您愿意，可以删除a下划线使用text-decoration: none;并覆盖其默认着色。

Javascript（jQuery）：
将clickListener绑定到项目很容易：

$('.lnav_item a').on('click', function() {
    //$(this) item is clicked, do whatever you want
    $('.lnav_item').removeClass('selected');
    $(this).parent().addClass('selected');
});

编辑：

如果您想为每个导航项目提供不同的风格等，您可以通过不同的方式实现：

jsfiddle DEMO

您可以使用CSS＆＃39; nth-child()选择器：

.lnav_item:nth-child(2):hover a{background-color: #252F1D;}
.lnav_item:nth-child(3):hover a{background-color: white;}

如果您在jQuery中执行此操作，或者您可以使用带参数（索引）的函数，并在需要时使用eq。
```
$('.lnav_item > a').each(function(index) {
    if(index == 0) {
        //give it a different onClick, CSS rule, etc
    }
    //and so on
});
```
- index从零开始，但nth-child从一个开始。

Answer 2

网站导航菜单的典型HTML5标记为nav element，其中包含ul element：

<nav>
  <ul>
    <li><a href="/1">1</a></li>
    <li><a href="/2">2</a></li>
    <li><a href="/3">3</a></li>
    <li><a href="/4">4</a></li>
  </ul>
</nav>

如果你能让你的CSS / JS使用这个标记（+ class属性或你需要的任何东西），那就太好了。
如果您需要更多元素，请添加div和/或span元素：它们是meaningless，因此它们不会更改文档的语义。

Answer 3

NAV元素只是LISTS。

你不需要将它们包装在任何东西中。

这是我自己的导航面板的一个示例（我也把它放在屏幕的左侧）

      <nav>
        <ul style="list-style: none">
            <h3>Main Menu</h3>
            <li style="font-size: 100%"><b>Article 1</b></li>
            <ul style="list-style: none">
            <br>
                <dt>
                <li style="font-size: 100%"><a href="Article 1.1">Article 
                                            1.1</a>
                </li>
                <br>
                <li style="font-size: 100%"><a href="Article 1.2">Article 
                                            1.2</a>
                </li>
                <br>
                </dt>
            </ul>
            <br>
    </nav>

将每个导航元素包装在div中是否合适？

3 个答案: