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

Question

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

谢谢!

Answer 1

JSFiddle演示

HTML结构：
有很多方法可以实现垂直导航。
最常见的是使用uland 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。

造型：您可以通过使用for
来摆脱子弹。 您可以使用选择器为它们提供不同的悬停样式，以使其更具交互性。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演示

1. 您可以使用 CSS 的nth-child()选择器：

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

2. 如果您在 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一开始。