1

現在、テストサイトにナビゲーションバーを追加しています。タグの下にバーを追加したり、タグに光を当てたりして、現在選択されているページを示すナビゲーションバーを見たことがあります<a>。私は今、そのようなcssスタイルを実現するための正しい方法に戸惑っています。選択したものの周りにグロー効果を実現し<a>て、ユーザーが現在表示しているページを表示するにはどうすればよいですか？ 例

ありがとうございました

私の<a>タグのために私は.buttonNavクラスを作成しました

ナビゲーションバーのCSS関連のルール：

<style>
/**************  Header Styling ****************/
#navigation {
    left: 440px;
    margin-top: 80px;
    position: relative;
}


#contentNav { color: #cfdae3; }
/* Dark Button CSS */
.buttonNav {
    outline: 0;
    padding: 5px 12px;
    display: block;
    color: #EBEBEB;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border: 1px solid #1c252b;
    border-radius: 3px;
    background: #232B30;
}
.buttonNav:hover {
    color: #fff;
    background: #4C5A64; 
}
.buttonNav:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    color: #fff;
    padding: 6px 12px 4px;
    background: #20282D; 
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
.button-list {
    list-style: none outside none;
    overflow: hidden;
}
.button-list li { float: left; margin: 0 5px 0 0; }
.button-list li.search { padding-left: 18px; margin-left: 10px; position: relative; list-style: none outside none;}

</style>

HTML

<div id="header">
  <div class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></div>
  <div id="navigation">

   <ul class="button-list">
       <h2>MAIN TITLE PAGE</h2>
    <li><a href="http://webprolearner2346.zxq.net/css-test2/index.php" class="buttonNav" >Content 1</a></li>
    <li><a href="http://webprolearner2346.zxq.net/css-test2/content2.php" class="buttonNav" >Content 2</a></li> 
   </ul> 
  </div>
 </div>
4

3 に答える 3

1

クラスを追加する場合

.currentPage {
  background: #yourDifferentColor;
  (box-shadow)..
  (text-decoration)..
}

現在のページを表すリンクに追加すると（すべてのページでこれを行う必要があります）、現在のページのリンクのスタイルを他のページとは異なるように定義して、仕様に合わせることができます。

于 2012-08-09T18:55:23.877 に答える
1

これを自動的に処理するためにjqueryを入れます

  $(document).ready(function () {
      var str = location.href.toLowerCase();
      $(".navigation li a").each(function () {
          if (str.indexOf(this.href.toLowerCase()) > -1) {
              $("li.highlight").removeClass("highlight");
              $(this).parent().addClass("highlight");
          }
      });
  })

highlightこの関数は、アクティブなli a要素にcssクラスを追加します。 次のページの名前がテキストと同じである場合に限ります。したがって、リンクの名前が「Product.html」の場合、a要素のテキストを「Product」にする必要があります。

HTMLの例

<ul class="navigation">
    <li class="highlight"><a href="index.html">Home</a></li>
    <li><a href="product.html">Product</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

cssは背景色をわずかに変更します。

.highlight{
    background-color: #fff;
}

あなたが知っているか、あなたが望むグロー効果を入れます

お役に立てれば、

編集：作業チュートリアル/デモhttp://blog.huidesign.com/automatically-highlight-current-page-in-navigation-with-css-jquery/

EDIT2：理解を深めてくれたSvenBiederに感謝します。

于 2012-08-09T18:59:48.900 に答える
0

さて、あなたは通常サーバーレベルでこれを処理します。今のところ、それはかなり簡単です。インデックスページを表示している場合は、ナビゲーションのインデックスページを指すリンクに移動し、クラスまたはインラインスタイルを追加します。

于 2012-08-09T18:55:50.960 に答える