動態導航設置活動狀態

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

謝謝！

來源

2013-02-21 user1696090

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

你可以嘗試一些沿着

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

來源

2013-02-21 15:23:42 Pete

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

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

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

你可以這樣說：

這將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

來源

2013-02-21 15:22:28 Jai

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

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

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

a:active {css}

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

.active a, a:active {css}

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

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

堆棧溢出引用：

來源

2013-02-21 15:26:22

嘗試這樣的事：

<?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的這也會失敗，它只是一個簡單的例子，讓你開始:)

來源

2013-02-21 15:39:26 Andrew

你可以使用的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-31 16:33:33

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

來源

2016-01-07 11:44:01

動態導航設置活動狀態

回答

相關問題