2013-02-21 345 views
4

我似乎經常遇到這個問題,永遠找不到解決方案。我有一個頂部導航的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> 

我已經建立所謂的有我的激活狀態屬性「活躍」 CSS類。理想情況下,我在尋找的是當你在「關於」頁面(或任何其他頁面)上時,爲活動狀態創建的類將被追加到當前li類中。

例子:

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

謝謝!

+0

感謝您的真棒問題! #DIY一路順風! – 0bserver07 2013-06-18 01:04:53

回答

5

你可以嘗試一些沿着

<li class="cemenu<?php echo ($_SERVER['PHP_SELF'] == '/about' ? ' active' : '');?>"><a href="<?php echo $base_url;?>/about">About</a></li> 
+0

嘿皮特,這幾乎工作。出於某種原因,您的<?php echo $ _SERVER ['PHP_SELF']; ?>正在返回/index.php而不是/關於 – user1696090 2013-02-21 15:33:53

+0

啊你在使用url重寫嗎? – Pete 2013-02-21 15:34:59

+0

嗯,在Wordpress中,我將我的固定鏈接更改爲帖子名 – user1696090 2013-02-21 15:36:14

5

你可以這樣說:

這將active類添加到包含從URL中page<a>

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

,如果你想添加類其父李替換最後一行到這一點,並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'); 

just tryout the fiddle here

+0

謝謝!這也有效,但更喜歡PHP路線。 – user1696090 2013-02-21 15:42:56

+0

噢,太棒了,很高興看到你爲你的問題得到了解決方案。感謝您的考慮。 – Jai 2013-02-21 15:44:31

1

首先,有一個造型「主動」聯繫準備了CSS僞類:

a:active {css} 

對於你的情況,你就必須將該類添加到您的樣式:

.active a, a:active {css} 

但是您的需求似乎更多地在PHP方面比CSS,也許別人會幫助你的那部分。將有一個JavaScript解決方案與jQuery,找到實際的位置,然後注入一個CSS選擇器到正確的元素。

檢查this articlethis other one關於wordpress。它會幫助你。

堆棧溢出引用:

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> 

這可能是值得研究使用wordpres函數,如get_page_link比使用服務器超級全球更好,因爲這是不好的。如果你的文件夾,而不是文檔根目錄中有WordPress的這也會失敗,它只是一個簡單的例子,讓你開始:)

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); 
-1

你可以嘗試這樣的

<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';