添加類導航菜單

考慮的情況下，我有以下菜單：添加類導航菜單

<ul> 
<li><a href="index.php">Index</a></li> 
<li><a href="about.php">About</a></li> 
<li><a href="test.php">Test</a><li> 
</ul

和菜單位於header.php文件。對於每個頁面（Index，About，Test），我都有index.php，about.php和test.php，並且所有這些文件都包含header.php！

我需要的是當我們在不同的頁面上時向li添加一個類。所以如果我們在about.php上，應該在第二個裏面添加這個類。

有沒有辦法處理jQuery，或者有什麼辦法來解決這個問題？

來源

2012-07-20 kk1991

你爲什麼要這麼做？好像你是複雜 – 2012-07-20 12:49:29

是的，你可以添加類使用JavaScript，但不會是更容易產生對服務器端的一些問題？ – Leri 2012-07-20 12:49:52

根據你需要什麼類的我會按照@PLB的建議添加與PHP服務器端的類。 – 2012-07-20 12:51:03

我用這樣的事情在我的靜態HTML網站之一，它可以適應：

<div id="navigation"> 

       <?php $currentPath = $_SERVER['REQUEST_URI']; ?> 
       <?php $currentClass = ' class="current"'; ?> 

       <ul id="nav"> 
        <li<?php if($currentPath == "/") { echo $currentClass; } ?>><a href="/">Home</a></li> 
        <li<?php if($currentPath == "/market-challenge/") { echo $currentClass; } ?>><a href="/market-challenge/">Market <br />Challenge</a></li> 
        <li<?php if($currentPath == "/environmental-benefits/") { echo $currentClass; } ?>><a href="/environmental-benefits/">Environmental <br />Benefits</a></li> 
        <li<?php if($currentPath == "/technology/") { echo $currentClass; } ?>><a href="/technology/">Technology</a></li> 
        <li<?php if($currentPath == "/contact/") { echo $currentClass; } ?>><a href="/contact/">Contact</a></li> 
       </ul> 

      </div>

享受！

來源

2012-07-20 12:53:08

每個李標籤製作獨一無二的標識，當鏈路是，如果使用jQuery .attr功能

來源

2012-07-20 12:49:38 CBaker

<ul> 
<li><a href="index.php" <?php if($_SERVER['PHP_SELF']=="/index.php") echo 'class="someclass"'; ?> >Index</a></li> 
<li><a href="about.php" <?php if($_SERVER['PHP_SELF']=="/about.php") echo 'class="someclass"'; ?> >About</a></li> 
<li><a href="test.php" <?php if($_SERVER['PHP_SELF']=="/test.php") echo 'class="someclass"'; ?> >Test</a><li> 
</ul>

這可能不是最好的方法上的變化單擊類，但它的任務服務器端。

來源

2012-07-20 12:51:11 hjpotter92

敢肯定它必須是$ _ SERVER [「PHP_SELF」] ==「的index.php」等雖然。 – 2012-07-20 12:54:00

@MrAzulay取決於文件的位置。如果他們被訪問爲：'http：// localhost/index.php'，那麼它將如我所述。 – hjpotter92 2012-07-20 12:57:31

不，只是測試它。 – 2012-07-20 13:02:22

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     jQuery('.nav li').each(function() { 
     var href = jQuery(this).find('a').attr('href'); 
     if (href === window.location.pathname) { 
     jQuery(this).addClass('active'); 
    } 
    }); 

}); 
</script>

將'.nav li'替換爲更適合您的DOM結構的內容。如果您的包裝div有一類菜單，請執行：jQuery('.menu li')

來源

2012-07-20 12:55:12

這是一個很好的客戶端解決方案。雖然我不會做這樣的客戶端任務，但很好的答案。 – 2012-07-20 12:55:46

添加存儲當前頁面的會話變量（包括頭文件之前）。在頭文件中檢查這個值並分配類。如果在我看來，更乾淨的代碼

$_SESSION['currentPage'] = 'index'; 
$_SESSION['currentPage'] = 'about'; 
$_SESSION['currentPage'] = 'test';

在頭部，

<ul> 
<li><a href="index.php" <?php if($_SESSION['currentPage']=="index") echo 'class="selected"' ?>>Index</a></li> 
<li><a href="about.php" <?php if($_SESSION['currentPage']=="about") echo 'class="selected"' ?>>About</a></li> 
<li><a href="test.php" <?php if($_SESSION['currentPage']=="test") echo 'class="selected"' ?>>Test</a><li> 
</ul>

來源

2012-07-20 13:04:38 Sree

爲什麼要將它存儲在會話中？ – 2012-07-20 13:09:11

使用速記。

<?php $self = $_SERVER['PHP_SELF']; ?> 
<ul> 
    <li><a href="index.php" <?php echo ($self == "/index.php" ? 'class="selected"' : ''); ?>>Index</a></li> 
    <li><a href="about.php" <?php echo ($self == "/about.php" ? 'class="selected"' : ''); ?>>About</a></li> 
    <li><a href="test.php" <?php echo ($self == "/test.php" ? 'class="selected"' : ''); ?>>Test</a></li> 
</ul>

來源

2012-07-20 13:07:36

對於上述問題，我已經完成了使用jQuery的codebins的解決方案。

DEMO：http://codebins.com/bin/4ldqpa4

在這裏，我所提到的步驟，上述溶液中執行。

1）在標題標籤中包含最新的jQuery.js和querystring-0.9.0.js javascript文件。

2）HTML

<div id="panel"> 
    <ul class="menu"> 
    <li> 
     <a href="#?page=0"> 
     Index 
     </a> 
    </li> 
    <li> 
     <a href="#?page=1"> 
     About 
     </a> 
    </li> 
    <li> 
     <a href="#?page=2"> 
     Test 
     </a> 
     <li> 
    </ul> 
</div>

3）CSS

ul.menu{ 
    border:1px solid #112266; 
    background:#ccc; 
} 
ul.menu li{ 
    list-style:none; 
    display:inline-block; 
    margin-left:10px; 
    padding:0px; 
    width:60px; 
    text-align:center; 
} 
ul.menu li:hover{ 
    background:#343434; 
} 
ul.menu li a{ 
    padding:0px; 
    color:#113399; 
    text-decoration:none; 
} 
ul.menu li:hover a{ 
    color:#c6b744; 
    text-decoration:underline; 
} 
ul.menu li.active{ 
    background:#343434; 
} 
ul.menu li.active a{ 
    color:#c6b744 
}

4）的jQuery：

$(function() { 
    $(".menu li").click(function() { 
     setTimeout(function() { 
      var page = $.QueryString("page"); 
      $(".menu li").removeClass("active"); 
      $(".menu li:eq(" + page + ")").addClass("active"); 
     }, 200); 
    }); 

});

在上述方案中，我必須設置像＃的href鏈接？頁=因爲箱來運行新的頁面重定向Java腳本是不可能的垃圾箱以及我必須使用setTimeout函數，因爲當前頁面不是重定向只是＃更改同一頁上的查詢字符串？頁=。

如果你想在你的項目，然後把上面的jQuery腳本共同的地方，以便在將執行每個菜單鏈接，並設置與活動類當前頁面的鏈接使用上面的解決方案。

注意：刪除setTimeout函數包裝只是不停地有代碼行腳本里面。它看起來像如下：

$(function() { 
     $(".menu li").click(function() { 
      var page = $.QueryString("page"); 
      $(".menu li").removeClass("active"); 
      $(".menu li:eq(" + page + ")").addClass("active"); 
     }); 
});

來源

2012-07-20 13:54:09 gaurang171

添加類導航菜單

回答

相關問題