每次单击li的一部分时，href都不会加载链接。 使用javascript使整个li可点击

Question

http://hemakessites.com

我想单击“关于”按钮转到“关于”页面。 我正在使用Javascript和JQuery处理该行为（使整个li可单击）。 出于某种原因，在li的不同区域中单击并不会始终加载页面。

如果有更好的解决方案，我愿意不使用jQuery。

li的“联系信息”和“爱好项目”没有href，因此链接无效。 如果转到“关于”页面，则菜单基于CSS起作用，而javascript则不尝试使整个li可单击。 因此，about.html页面上没有javascript，并且您可以在没有任何javascript的情况下看到菜单问题。

谢谢你的帮助！

index.html
    <div class="navcontainer">
    <ul><li>Link Title</
    li><li>Second_Link Title</ <!-- fixes extra space with </li><li> -->
    li></ul>
    </div>


style.css
    #nav li
      {
      display: inline-block;
      List-Style-Type: None;
      float:left;
      text-align:Center;
      width: 153px;
      height:46px;  
      font-size: 80%;
      border-Bottom: 1px solid #666666;
      }

    #nav li #about    
      {
      z-index: 10000;
      position: relative;
      top: 18px;
      text-decoration: underline;
      -moz-user-select: -moz-none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      }

Answer 1

只需在CSS中添加以下内容：

#nav li.about a{
z-index:10000; }

它会工作

Answer 2

您的问题不是JavaScript，而是CSS。 您具有将<li>放大的悬停属性。 单击时，active属性会使其收缩，从而使元素比以前更小。 如果单击放大的元素的上角，将不会加载该元素，因为该元素现在位于可点击区域的下方。 如果单击中间的底部，它将出现。

最终，对于这样的事情，使用jQuery UI来管理选项卡或使用Twitter Bootstrap可能会更好。 开箱即用，您无需担心CSS问题，而且它们看起来已经不错，因此无需额外的样式。

如果您想坚持下去，您可能只想放弃花哨的CSS。 摆脱：active类，它应该可以正常工作。

Answer 3

您现在遇到的问题是li比a 。 单击l i，但在a之外单击将无法使链接正常工作，正如您已经发现的那样。

代替将所有样式和效果应用于li元素，应将它们直接应用于a元素并将其设置为显示为块。 这样， li的大小将与a相同，并且无论您在悬停的项目上单击什么位置，href都可以正常工作。 明确的联系始终是一个好主意，因为平板电脑和其他toutchscreen设备每天都在大量增加。

请注意，它不是直接复制/粘贴代码，尤其是在浮动和定位方面，但是通过直接将样式应用于a元素来实现您想要的内容并不困难。 如果您在转换代码时遇到困难，请随时在jsfiddle上建立一个有效的示例，我们将竭诚为您服务。

此解决方案不需要任何js。 使用js进行主要导航始终是一个坏主意，因为如果不是不可能的话，这将使js禁用者难以导航您的网站。 不完全是我所说的宽容降级...