将每个导航元素包装在div中是否合适？ [英] Is it appropriate to wrap each navigation element in a div?

问题描述

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

谢谢！

解决方案

JSFIDDLE DEMO

HTML结构：

有许多方法可以实现垂直导航。

最常见的是使用 ul 和 li ：

 < div id =lnav_container> 
< ul id =lnav> 
< li class =lnav_item>< a href =＃>第1项< / a>< / li> 
< li class =lnav_item>< a href =＃>第2项< / a>< / li> 
< li class =lnav_item>< a href =＃>第3项< / a>< / li> 
< li class =lnav_item>< a href =＃>第4项< / a>< / li> 
< / ul> 
< / div> 
  

也很常见的有 a li 。

样式：

您可以通过 list-style-类型：无; 为 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; 
颜色：白色
 font-size：18px; 
} 
 .lnav_item：hover a {background-color：orange;} 
  

为了摆脱 a 下划线使用 text-decoration：none; 并覆盖其默认着色如果你愿意。 / p>



Javascript（jQuery）：

这将很容易绑定 clickListener 到项目：

  $（'。lnav_item a'）。on（'click'，function {
 // $（this）item被点击，做任何你想要的
 $（'。lnav_item'）。removeClass（'selected'）; 
 $（this）.parent .addClass（'selected'）; 
}）; 
  

编辑：

如果您想给每个导航项目不同的样式等，您可以通过不同的方式实现：

jsfiddle DEMO

1. 您可以使用CSS nth-child（） selector：

     .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）{
    //给它一个不同的onClick，CSS规则等
   } 
    //等等
   }）; 
     

   
   
   

   
   
   • 索引是零为基础，但 nth-child 从一开始。
   
   

I'm learning HTML + CSS and working on a website where I need to have a vertical navigation bar on the left side which will have four elements which can be interacted with. Is it standard practice to wrap each of these four elements with a div or is there a more elegant or semantic way to solve this problem? I will want each element to have unique on-click functions associated with them, which is why I thought giving them divs and classes would make the most sense for interacting with them later.

Thanks!

解决方案

JSFIDDLE DEMO

HTML structure:
There are many ways to achieve a vertical navigation.
The most common would be to use ul and 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>

Also very common to have a tags inside li.

Styling:
You can get rid of the bullets by having list-style-type: none; for the ul.
You can give them different style on hover by using :hover selector to make it more interactive.

.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;}

To get rid of a underline use text-decoration: none; and override its default coloring if you wish.

Javascript (jQuery):
It'll be easy to bind clickListener to the items:

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

EDIT:

If you want to give each of the navigation items a different style, etc, you can achieve it different ways:

jsfiddle DEMO

1. You can use CSS' nth-child() selector:

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

2. If you're doing it in jQuery, alternatively you can use the function with parameter (index) and maybe use eq if needed.

   $('.lnav_item > a').each(function(index) {
       if(index == 0) {
           //give it a different onClick, CSS rule, etc
       }
       //and so on
   });
   

   • index is zero-based, but nth-child starts from one.

这篇关于将每个导航元素包装在div中是否合适？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！