5

私はこの問題に頻繁に遭遇するようで、解決策を見つけることができません。トップナビゲーション付きのWordpressサイトがあります。これは私のheader.phpにあり、すべてのページで使用されているため、各ページのアクティブなメニュー状態をハードコーディングすることはできません。

各ページで機能するようにアクティブ化状態を動的に設定するにはどうすればよいですか？

これが私の現在のナビゲーションコードです：

<nav id="main-menu" class="padbot">
<ul id="ce">
    <li class="cemenu"><a href="<?php echo $base_url;?>/about">About</a></li>
    <li class="cemenu"><a href="<?php echo $base_url;?>/consulting">Consulting</a></li>
    <li class="cemenu"><a href="<?php echo $base_url;?>/intelligence">Intelligence</a></li>
    <li class="cemenu"><a href="<?php echo $base_url;?>/academy">Academy</a></li>        
    <li class="cemenu"><a href="<?php echo $base_url;?>/blog">Blog</a></li>
    <li class="cemenu"><a href="<?php echo $base_url;?>/contact">Contact</a></li>
 </ul>

アクティブな状態のプロパティを持つ「active」というCSSクラスをすでに設定しています。理想的には、私が探しているのは、「About」ページ（または他のページ）で、アクティブ状態用に作成したクラスが現在のliクラスに追加されるときです。

例：

<li class="cemenu active"><a href="<?php echo $base_url;?>/about">About</a></li>

ありがとう！

4

6 に答える 6

7

あなたはの線に沿って何かを試すことができます

<li class="cemenu<?php echo ($_SERVER['PHP_SELF'] == '/about' ? ' active' : '');?>"><a href="<?php echo $base_url;?>/about">About</a></li>
于 2013-02-21T15:23:42.407 に答える
5

あなたはこのようにすることができます：

これにより、fromurlを含むactiveクラスがに追加されます。<a>page

$(function(){
   var url = window.location.href;
   var page = url.substr(url.lastIndexOf('/')+1);
   $('.cemenu a[href*="'+page+'"]').addClass('active');
});

親liにクラスを追加する場合は、最後の行をこれに置き換えます。cssクラスは次のようになります。

.active a{
      css 
      properties 
      for active li's a
}

 // using closest
$('.cemenu a[href*="'+page+'"]').closest('li').addClass('active');

また

// using parent
$('.cemenu a[href*="'+page+'"]').parent('li').addClass('active');

ここでフィドルを試してみてください

于 2013-02-21T15:22:28.097 に答える
1

まず、「アクティブ」リンクのスタイリング用に準備されたcss疑似クラスがあります。

a:active {css}

あなたの状況では、このクラスをスタイリングに追加する必要があります：

.active a, a:active {css}

しかし、あなたのニーズはCSSよりもPHP側にあるように思われます。おそらく、他の誰かがその部分を手伝ってくれるでしょう。jQueryを使用したjavascriptソリューションがあり、実際の場所を見つけてから、cssセレクターを適切な要素に挿入します。

ワードプレスについてのこの記事とこの他の記事をチェックしてください。それはあなたを助けます。

スタックオーバーフロー参照：

于 2013-02-21T15:26:22.970 に答える
1

次のようなものを試してください：

<?php $pages = array('about' => 'About Us', 'blog' => 'blog') ?>

<ul>
<?php foreach($pages as $url => $page): ?>
    <?php $isActive = $_SERVER["REQUEST_URI"] == $url ?>
    <li<?php echo $isActive ? ' class="active"' : '' ?>>
        <a href="<?php echo $base_url . "/{$url}" ?>"><?php echo $page ?></a>
    </li>
<?php endforeach ?>
</ul>

get_page_linkなどのwordpres関数を使用することを検討する価値があるかもしれません。これは、サーバーのスーパーグローバルを使用するよりも優れているためです。ドキュメントルートではなくフォルダにワードプレスがある場合も、これは失敗します。これは、開始するための簡単な例です:)

于 2013-02-21T15:39:26.300 に答える
0

preg_replace（）を使用して、class="active"次のように追加できます。

ob_start();
echo '<ul>
  <li><a href="page1.php">Page 1</a></li>
  <li><a href="page2.php">Page 2</a></li>
  </ul>';
$output = ob_get_clean();
$pattern = '~<li><a href="'.$url.'">~';
$replacement = '<li class="active"><a href="'.$url.'">';
echo preg_replace($pattern, $replacement, $output);
于 2015-12-31T16:33:33.773 に答える
0

あなたはこのように試すことができます

<li class="<?php 
                if($this_page=='Home'){
                     echo 'active';
                }
          ?>">
      Home
 </li>
<li class="<?php 
                if($this_page=='Contact'){
                     echo 'active';
                }
          ?>">
      Contact
 </li>

そしてあなたのホームページで

$this_page='Home';

そしてあなたの連絡先ページで

$this_page='Contact';
于 2016-01-07T11:44:01.280 に答える