0

すべてのページにこのようなメニューがあり、ページに応じて選択したメニューを強調表示する CSS クラスを追加したいと考えています。

これを行う最も簡単な方法はどれですか?

<div id="menu">
   <a href="index.php" class="item-menu">Home</a>
   <a href="projects.php" class="item-menu">Projects</a>   
   <a href="contact.php" class="item-menu">Contact</a>            
</div>

メニューコードはmenu.php、すべてのページで呼び出されるというファイル内にあります。私は曲がりくねった方法で（IFやその他のものを使って）欲しいものを達成することができますが、単純な解決策を探しています。

4

4 に答える 4

5

これは汚いですが、かなり簡単です：

<div id="menu">
   <a href="index.php" class="item-menu<?php if( basename( $_SERVER["SCRIPT_FILENAME"] ) == 'index.php' ) echo ' active';?>">Home</a>
   <a href="projects.php" class="item-menu<?php if( basename( $_SERVER["SCRIPT_FILENAME"] ) == 'projects.php' ) echo ' active';?>">Projects</a>   
   <a href="contact.php" class="item-menu<?php if( basename( $_SERVER["SCRIPT_FILENAME"] ) == 'contact.php' ) echo ' active';?>">Contact</a>            
</div>
于 2012-05-05T15:12:59.297 に答える
1

これはあなたが始めるのに役立つはずです

<div id="menu">
    <a href="index.php" class="item-menu <?= $_SERVER['REDIRECT_URL'] == '/index.php' ? 'selected' : '' ?>">Home</a>
    <a href="projects.php <?= $_SERVER['REDIRECT_URL'] == '/projects.php' ? 'selected' : '' ?>" class="item-menu">Projects</a>   
    <a href="contact.php <?= $_SERVER['REDIRECT_URL'] == '/contact.php' ? 'selected' : '' ?>" class="item-menu">Contact</a>            
</div>
于 2012-05-05T15:12:14.983 に答える
1

すでに提示されたソリューションの代替として、クラスをメイン<ul/>要素に追加し、各組み合わせに対して CSS をセットアップするだけです。

<div id="menu" class="home">
   <a href="index.php" class="home item-menu">Home</a>
   <a href="projects.php" class="projects item-menu">Projects</a>   
   <a href="contact.php" class="contact item-menu">Contact</a>            
</div>​

#menu.home a.home,
#menu.projects a.projects,
#menu.contact a.contact {
    /* Active link CSS */
}​

次に、PHP を使用して のクラスを決定するだけで済みます#menu。これは、アプリケーションのセットアップ方法に応じて、いくつかの異なる方法で実行できます。あなたmenu.phpが単に他のページに含まれている場合は、このクラスを別の場所 (<body/>要素など) に配置し、以前の CSS を のようなものに調整できbody.home #menu a.home, ...ます。

実際の例を参照してください - http://jsfiddle.net/jaredhoyt/7TX4h/

于 2012-05-05T15:16:28.580 に答える
0

決定に従って要素を取得し、classname を class 属性に追加します。

if ($res = $xpath->query(sprintf('//a[@href="%s"]', basename($_SERVER['SCRIPT_FILENAME'])))
{
    $res->item(0)->setAttribute('class', $res->item(0)->getAttribute('class') . ' active');
}

これは、dom 要素内にメニューがあり、それを使用できることを前提としていますDOMXpath( $xpath)。

于 2012-05-05T15:20:53.317 に答える