0

http://hemakessites.com

[About] ボタンをクリックして About ページに移動したいのですが。私は動作を処理するためにJavascriptとJQueryを使用しています（li全体をクリック可能にします）。何らかの理由で、li のさまざまな領域をクリックしても、常にページが読み込まれるとは限りません。

より良い解決策があれば、jQuery を使用しないことにオープンです。

「連絡先」と「趣味のプロジェクト」には href がないため、リンクが機能しません。Aboutページに行くと、メニューは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

あなたが今抱えている問題は、liが よりも大きいということaです。i をクリックしても、li の外側でaはリンクが機能しません。

すべてのスタイルと効果をli要素に適用する代わりに、それらをa要素に直接適用し、ブロックとして表示するように設定する必要があります。このように はliと同じサイズになりa、ホバーされた項目をクリックすると、href は正常に機能します。タブレットやその他のタッチスクリーン デバイスの数が日々急増していることから、より大きなリンクは常に良い考えです。

特にフロートと配置に関しては、コードをそのままコピーして貼り付けるわけではありませんが、スタイルをa要素に直接適用することで目的を達成するのは難しくありません。コードの変換に問題がある場合は、jsfiddle で動作する例を自由に設定してください。可能な場合は喜んでお手伝いします。

このソリューションでは、js はまったく必要ありません。メイン ナビゲーションに js を使用することは、常に悪い考えです。js が無効になっているユーザーがサイトをナビゲートすることが、不可能ではないにしても困難になるからです。私が優雅な劣化と呼ぶものとは正確には異なります...

于 2012-08-29T23:30:12.917 に答える
0

あなたの問題はJavaScriptではなく、CSSです。を拡大するホバー属性があり<li>ます。クリックすると、アクティブな属性によって要素が縮小し、要素が以前よりも小さくなります。拡大された要素の上隅をクリックすると、要素がクリック可能な領域の下にあるため、読み込まれません。真ん中から下に向かってクリックすると、そうなります。

最終的に、このような場合は、jQuery UI を使用してタブを管理するか、Twitter Bootstrap を使用する方がよいかもしれません。箱から出してすぐに動作し、CSS の問題を心配する必要はありません。さらに、それらは既に見栄えが良いため、余分なスタイリングは必要ありません。

すでに行っていることに固執したい場合は、派手な CSS を捨てることをお勧めします。:active クラスを取り除くと、問題なく動作するはずです。

于 2012-08-29T23:00:44.257 に答える
0

CSS に以下を追加するだけです。

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

そしてそれはうまくいく

于 2012-08-29T22:39:52.453 に答える