href没有在每次单击li的一部分时加载链接.使用javascript使整个li可以点击

href not loading link every time part of the li is clicked. Using javascript to make the whole li clickable

本文关键字：li javascript 链接 加载 使用 分时 单击 href 一部      更新时间：2023-09-26

http://hemakessites.com

我想单击"关于"按钮转到"关于"页面。我使用Javascript和JQuery来处理行为（使整个li都可以点击）。出于某种原因，在li的不同区域点击并不总是加载页面。

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

"联系方式"answers"爱好项目"李没有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;
      }

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

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

并且它将工作

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

最终，对于这样的事情，您可能会更好地使用jQuery UI来管理您的选项卡或使用Twitter Bootstrap。开箱即用，你不必担心CSS问题，而且它们已经很好看了，所以没有额外的样式。

如果你想坚持你已经在做的事情，你可能只想放弃花哨的CSS。去掉：活跃的类，我认为它应该可以正常工作。

现在的问题是li比a大。点击l i，但在a之外不会使链接工作，正如您已经发现的那样。

与其将所有样式和效果应用于li元素，不如将它们直接应用于a元素，并将其设置为显示为块。这样，li的大小将与a的大小相同，无论您在哪里单击悬停的项目，您的href都会正常工作。随着平板电脑和其他屏幕设备的数量每天都在增加，更大的链接总是一个好主意。

请注意，它不会是代码的直接复制/粘贴，尤其是在浮动和定位方面，但通过将样式直接应用于a元素，应该不会很难实现您想要的。如果您在转换代码时遇到困难，请随时在jsfiddle上设置一个工作示例，我们很乐意尽可能提供帮助。

这个解决方案不需要任何js。使用js作为主导航总是一个坏主意，因为它会让禁用js的人很难（如果不是不可能的话）在你的网站上导航。不完全是我所说的优雅有辱人格。。。

相关文章：