0

次のレイアウトのナビゲーションバーがあります。

<ul>
<li>
    <a href="#">Nav Item 1</a>
</li>
<li class="dropdown">
    <a href="/where" class="dropdown-toggle disabled" data-toggle="dropdown">
    Where? <b class="caret"></b>
    </a>
        <ul class="dropdown-menu">
            <li class="nav-header"> SUBNAV HEADER </li>
            <li class="divider"></li>
            <li><a href="#">SubNav 1</a></li>
            <li><a href="#">SubNav 2</a></li>
        </ul>
</li>
<li>
    <a href="#">Nav Item 2</a>
</li>
<li>
    <a href="#">Nav Item 3</a>
</li>

Web サイトのすべてのページに配置する php 配列と foreach ステートメントを作成しました。特定のページにいるとき、メニューのそのページには次のナビゲーション項目があります。どのページに応じて $page を変更すると、アクティブなクラスが変更されます。

ナビゲーション バーで動作するネストされた配列を作成しましたが、アクティブなページが SubNav のページである場合、両方のドロップダウン アイテムが必要です。AND SubNav がアクティブなクラスを持つようにします。

私は次のものを持っていますが、たとえばアフリカのページでは、どこですか? アイテムはアクティブですが、アフリカ メニュー アイテムもアクティブではありません。両方のメニュー項目をアクティブにしたいと思います。

私は現在、次のものを持っています：

echo '<ul class="nav pull-right">';
$nav_items = array('/'=>'Home', '/where'=>'Where?', '/appeals'=>'Current Appeals', '/news'=>'Latest News', '/events'=>'Events' );
$default_subnav = '<a href="/where" class="dropdown-toggle disabled" data-toggle = "dropdown">where?<b class="caret"></b></a>' . "\n". '<ul class="dropdown-menu"><li class="nav-header"> SUBNAV HEADER </li><li class="divider"></li>'; 
$sub_nav = array( 'africa'=>'Africa', 'bangladesh'=>'Bangladesh', 'gaza'=>'Palestine/Gaza', 'kashmir'=>'Kashmir', 'pakistan'=>'Pakistan', 'uk'=>'United Kingdom' ); 

foreach ($nav_items as $nav_href=>$nav_title) {
               if ($nav_href != '/where') {

                   if ($page == $nav_href) {
                        echo  '<li class="active"><a href="'. $nav_href . '">' . $nav_title . '</a></li>' . "\n";
                    } else {
                        echo '<li><a href="'. $nav_href . '">' . $nav_title . '</a></li>' . "\n";
                      }
                  } 
                  else {
                     if ($page == $nav_href) {
                        echo  '<li class="active dropdown">' . $default_subnav . "\n";
                      } else {
                        echo '<li class = "dropdown">' . $default_subnav . "\n";
                      }
                     foreach ($sub_nav as $sub_item=>$value) {
                         echo '<li><a href="../where/' . $sub_item . '">' . $value . '</a></li>' . "\n";     
                      }
                      echo '</ul></li>'; 
                }
            }

これは以下を出力します:

    <ul class="nav pull-right"><li class="active"><a href="/">Home</a></li>
<li class = "dropdown"><a href="/where" class="dropdown-toggle disabled" data-toggle = "dropdown">where?<b class="caret"></b></a>
<ul class="dropdown-menu"><li class="nav-header"> SUBNAV HEADER </li><li class="divider"></li>
<li><a href="../where/africa">Africa</a></li>
<li><a href="../where/bangladesh">Bangladesh</a></li>
<li><a href="../where/gaza">Palestine/Gaza</a></li>
<li><a href="../where/kashmir">Kashmir</a></li>
<li><a href="../where/pakistan">Pakistan</a></li>
<li><a href="../where/uk">United Kingdom</a></li>
</ul></li><li><a href="/appeals">Current Appeals</a></li>
<li><a href="/news">Latest News</a></li>
<li><a href="/events">Events</a></li></ul>

私が望むものを達成できるように、誰かが私のphpを変更できますか? 私の知る限り、これは私が取ることができる限りです:(ありがとう！

画像はこちら: http://i.stack.imgur.com/BYkJi.png Where と subnav アイテムの両方がアクティブで、アクティブなクラスがあります。

4

1 に答える 1

0

サブアイテムバングラデシュがアクティブになる必要がある場合、コードセット$pageを「/where/Bangladesh」に基づいてください。おそらく$pageREQUEST_URIから作成します。これで、チェックすることでアクティブなクラスを設定できます: $page「/where」で始まる、および/または$page最後にサブアイテムと一致する:

              else {
                 if ($page == $nav_href) {
                    echo  '<li class="active dropdown">' . $default_subnav . "\n";
                  } else {
                    echo '<li class = "dropdown'.(preg_match('/^\/where/',$page)?' active':'').'">' . $default_subnav . "\n";
                  }
                 foreach ($sub_nav as $sub_item=>$value) {
                     echo '<li class="'.(preg_match('/\/'.str_replace('/','\/',$value).'$/',$page)?'active':'').'"><a href="../where/' . $sub_item . '">' . $value . '</a></li>' . "\n";     
                  }
                  echo '</ul></li>'; 
            }

注: 画像からメニュー効果を得るには、「nav-pills」をメニューに追加する必要があります。以下も参照してください: http://twitter.github.io/bootstrap/components.html#navs

于 2013-06-15T21:39:16.887 に答える