ページごとにサイドバーのアクティブな状態を行うためのクリーンな方法はありますか？

Question

私はこのバーコード私は、現在のページへのアクティブなクラスを追加したいので、これは私が

<li><a href="/restaurant_pos"><span>Restaurant POS Systems</span></a> 
<ul> 
    <li><a <?php if($_SERVER['REQUEST_URI'] == '/restaurant_pos/'){ 
     echo "class='active' "; 
    } 
    ?> href="/restaurant_pos">Restaurant POS Systems</a></li> 
    <li><a 
     <?php if($_SERVER['REQUEST_URI'] == '/bar_nightclub_pos/'){ 
      echo "class='active' "; 
     } 
     ?> 
     href="/bar_nightclub_pos">Bar and Nightclub POS Systems</a></li> 
    <li><a href="/bbq-restaurant-pos">BBQ Restaurant POS</a></li> 
    <li><a href="/bowling-alley-pos-system">Bowling Alley Point of Sale</a></li> 
    <li><a href="/cafe-pos">Cafe Point of Sale Systems</a></li> 
    <li><a href="/chinese-restaurant-pos">Chinese Restaurant POS Systems</a></li> 
    <li><a href="/fine-dining-pos">Fine Dining Point of Sale Systems</a></li> 
    .... 
    .... 

を取ったアプローチであるが、私はあることをそこに持っていると感じ

<li><a href="/restaurant_pos"><span>Restaurant POS Systems</span></a> 
<ul> 
    <li><a href="/restaurant_pos">Restaurant POS Systems</a></li> 
    <li><a href="/bar_nightclub_pos">Bar and Nightclub POS Systems</a></li> 
    <li><a href="/bbq-restaurant-pos">BBQ Restaurant POS</a></li> 
    <li><a href="/bowling-alley-pos-system">Bowling Alley Point of Sale</a></li> 
    <li><a href="/cafe-pos">Cafe Point of Sale Systems</a></li> 
    <li><a href="/chinese-restaurant-pos">Chinese Restaurant POS Systems</a></li> 
    <li><a href="/fine-dining-pos">Fine Dining Point of Sale Systems</a></li> 
    .... 
    .... 

ANSを持っていますこれを行うには良いときれいな方法...任意のアイデア

Answer 1

これはJavaScript/jQueryで簡単に行うことができます。クライアント側の対話を維持すると、サーバー要求も節約されます（ただし、負荷の高いサイトではこれが問題になる可能性があります）。

このような何か - あなたはあなたのサイトのURLに基​​づいてurl配列の位置を調整する必要がある場合があります

jsfiddle：foreachループでhttp://jsfiddle.net/g_thom/AXm6e/2/

var pathname = window.location.href; 
var partsArray = pathname.split('/'); 
var url = '/' + partsArray[3]; 
var a_s = $('li a'); 
a_s.removeClass('active'); 
a_s.each(function() { 
    if ($(this).attr('href') == url) { 
     $(this).addClass('active'); 
    } 
}); 

Answer 2

確かに、

1. すべてのリンクとそのテキストを配列の中に入れます。

2. 次に、出力を行うために配列を反復処理します。

3. 出力がアクティブな機能を持たないことがわかっている場合は、次の手順に進むことができます。

4. リンクをマッピングしている現在のリクエストのチェックを導入し、そうであれば、そのクラスを出力に追加します。

繰り返しを使用して問題を解決しました。データを反復可能な（ループ可能な）構造に入れることによって、同じデータが同じ方法で適用されます。コードを繰り返しないで、データを繰り返します。お役に立てれば。

Answer 3

ループデータ配列による

<?php 
$links = array(
    array('/restaurant_pos','Restaurant POS Systems'), 
    array('/bar_nightclub_pos/','Bar and Nightclub POS Systems') 
); 
foreach($links as $k => $v){ 
    if($_SERVER['REQUEST_URI'] == '/bar_nightclub_pos/'){ $class = ' class="active"'; } else { $class = ''; } 
    echo '<li><a href="'.$v[0].'"'.$class.'>'.$v[1].'</a></li>'; 
}; 
?> 

出力：

Answer 4

このような何かを：

<?php 
$restaurants = array(
    array('label' => 'Restaurant POS Systems', 'url' => '/restaurant_pos'), 
    array('label' => 'Bar and Nightclub POS Systems', 'url' => '/bar_nightclub_pos'), 
    ... 
); 

/*set active restaurant*/ 
foreach ($restaurants as &$r) { 
    $r['active'] = ($_SERVER['REQUEST_URI'] == $r['url'])? 'active': ''; 
} 
unset($r); 
?> 
<ul> 
<?php foreach ($restaurants as $r) { ?> 
    <li><a href="<?php echo $r['url']; ?>" class="<?php echo $r['active']; ?>"><?php echo $r['label']; ?></a></li> 
<?php } ?> 
</ul> 

HTMLを生成するコードの一部にできるだけ少ないプログラミングロジックを持つことが一般的に良いアイデアです。