1

私はまだフロントエンド開発に不慣れで、私の最初の本当に大きなサイト/ワードプレスのブログに取り組んでいます。

だから私の質問はこれです、私はサイトのすべてのページで同じになるメニューを持っています。ただし、各セクションの名前はメニューナビゲーションで強調表示されます。

現在のNav_Barマークアップ：

<div id="nav_bar">

    <ul class="nav">
        <li class="nav_li"><a href="../index.html">Home</a></li>
        <li class="nav_li"><a href="#">About</a></li>
        <li class="nav_li selected"><a href="#blog_content">Blog</a></li>
        <li class="nav_li"><a href="#">Book</a></li>
        <li class="nav_li"><a href="#">Media</a></li>
        <li class="nav_li"><a href="#">Events</a></li>
        <li class="nav_li"><a href="#">Services</a></li>
        <li class="nav_li"><a href="#">Contact</a></li>

        <li class="search">
            <input type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" />

        </li>

        <li class="search_btn">
            <a href="#" title="Lets find it!"><div class="search_button">Go</div></a>
        </li>

    </ul>

</div><!-- nav_bar -->

これで、この単純なPHPコードを使用する前にページを作成しました。<?php include("menu.php"); ?>

ただし、1つ目は、menu.php + select = "home"のように、受信する値を受け入れるようにこのメニューを整理し、2つ目は、メニュー項目の1つに選択されたクラスを追加するためにその値をどのように渡すかです。

4

5 に答える 5

2

まず、li "nav_li"のクラスは冗長であり、削除できます。.nav liを適切に使用して、これらのリスト項目をより少ないコード行で参照します。これは、JQueryセレクターとCSSセレクターの両方として機能します。次に、実際の質問に答えます。次のようにアクティブクラスを使用します。

// Assuming the following html. <ul class="nav"><li><a href="/about.php">About</a></li></ul>    

$('.nav li').click(function() {
    $('.nav li.active').removeClass('.active');
    $(this).addClass('.active');
    window.location = $(this).children('a').attr('href');
    return;
});

次に、ナビゲーションバーを保持している領域で、現在のURLがアクティブであるかどうかを次のように確認します。

<?php    
$currentUri = $_SERVER['REQUEST_URI'];
<ul class="nav">
    <li class="<?php if($currentUri == '/about.php') {echo 'active';} ?>"><a href="/about.php">About</a></li>
</ul>

phpスクリプトの条件を各リストアイテムに追加します。

よろしくお願いいたします。ケビン

于 2012-09-24T17:20:26.437 に答える
2

（特定のページを表示するのではなく）メニュー項目を強調表示する目的で「着信値」が必要だと思いますか？ブラウザはそれがどのページにあるかをすでに知っているので、それは不要です。

これは、jQueryで現在のページを強調表示する1つの方法です。

$('.nav li a').each(function(){
  var link = $(this).attr('href'),
    current_page = location.href;
  if(current_page.indexOf(link) != -1) {
      $(this).addClass('current-page');
  }
});
于 2012-09-24T16:41:52.367 に答える
1

これはjavascriptを使用して行うことができます

var url=document.location.toString();
if(url=="http://www.something.com/some.php")
{
//code to add class to specific link
}
else if(url=="http://www.something.com/someelse.php")
{
//code to add class to specific link
}

menu.phpのサーバー側でもこれを行うことができます

$url=$_SERVER['REQUEST_URI']

次に、URLを確認し、それに応じてクラス名を追加します

于 2012-09-24T16:42:46.740 に答える
1

$page = 'blog'インクルードする前に、menu.phpなどのパラメータに値を設定します。

<li class="nav_li<?php echo $page === 'blog' ? " selected='selected'" : "" ?>"><a href="#blog_content">Blog</a></li>
于 2012-09-24T16:46:02.527 に答える
1

私があなたが求めているものを理解していない場合は、おそらく次のようなものです：

index.php：

<?php
  $page = 'home';
  // page code ...
?>

about.php：

<?php
  $page = 'about';
  // page code ...
?>

などなど...

次に、menu.phpを少し調整しました。

<div id="nav_bar">

  <ul class="nav">
    <li class="nav_li home"><a href="../index.html">Home</a></li>
    <li class="nav_li about"><a href="#">About</a></li>
    <li class="nav_li blog"><a href="#blog_content">Blog</a></li>
    <li class="nav_li book"><a href="#">Book</a></li>
    <li class="nav_li media"><a href="#">Media</a></li>
    <li class="nav_li events"><a href="#">Events</a></li>
    <li class="nav_li services"><a href="#">Services</a></li>
    <li class="nav_li contact"><a href="#">Contact</a></li>

    <li class="search">
        <input type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" />

    </li>

    <li class="search_btn">
        <a href="#" title="Lets find it!"><div class="search_button">Go</div></a>
    </li>

  </ul>

</div><!-- nav_bar -->

そして最後にいくつかのjavascript：

<script>
  $(function () {
   $('#nav_bar li.<?=$page?>').addClass('selected');
  });
</script>

これは、jQueryが使用されていることを前提としていますが、明らかに必要ではありません。同じことがストレートjavascriptでも実行できます。

于 2012-09-24T17:32:23.577 に答える