0

http://hemakessites.com

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

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

“联系信息”和“爱好项目”没有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;
      }
4

3 回答 3

0

The problem you have right now is that the li is bigger then the a. Clicking on the li, but outside the a will not make the link work, as you already found out.

In stead of applying all your styles and effects to the li element, you should apply them to the a element directly and set it to display as a block. This way the li will take the same size as the a, and whereever you click on the hovered item, your href will work just fine. Bigger links is always a good idea, definitly with the amount of tablets and other toutchscreen devices rizing every day.

Note that it will not be a straight copy / paste of your code, especially when it comes to floats and positioning, but it should not be to hard to achieve what you are after by applying the styles directly to the a element. If you have difficulty converting your code, feel free to set up a working example on jsfiddle and we will be happy to help out where possible.

This solution does not require any js what so ever. Using js for your main navigation is always a bad idea, as it will make it hard, if not impossible, to navigate your site for people with js disabled. Not exactly what i would call gracefull degrading...

于 2012-08-29T23:30:12.917 回答
0

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

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

它会起作用

于 2012-08-29T22:39:52.453 回答
0

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

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

如果你想坚持你已经有了，你可能只想放弃花哨的 CSS。摆脱 :active 课程，我认为它应该可以正常工作。

于 2012-08-29T23:00:44.257 回答