从页面 url 向 li 添加活动类答案

【问题标题】：add active class to li from page url从页面 url 向 li 添加活动类
【发布时间】：2013-07-02 07:13:59
【问题描述】：

我正在使用以下内容获取活动页面网址：

<?php
function curPageURL() {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}
?>

呼应以上内容，我的网址如下：

http://www.domain-nane.com/index.php?option=com_content&view=article&id=6&Itemid=109

如果活动页面存在，我想向我的“li”添加一个“当前”类 - 取决于 url 中包含的“Itemid” - 即

<li class="current">
   <a href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=109">Link 1</a>
<li>
   <a href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=110">Link 2</a>
</li>
<li>
   <a href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=111">Link 3</a>
</li>

任何提示/想法？

【问题讨论】：

你能解释一下“页面存在”是什么意思吗？你的意思是如果它是当前正在显示的页面？
我认为他说的是当前页面...
yes... 如果当前显示的页面与 Itemid 匹配（在 url 的末尾），那么我想将 class="current 应用于我的 '李'
但是 Joomla!它会自动
是的......我知道 - 但这是一个奇怪的模块，我正在尝试破解 :(

标签： php css class url

【解决方案1】：

我认为你想要这样的东西：

 <ul id="navigation">
    <li <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="current"';?>><a href="index.php">Home Page</a></li>
    <li <?php if (strpos($_SERVER['PHP_SELF'], 'about.php')) echo 'class="current"';?>><a href="about.php">About Me</a></li>
    <li <?php if (strpos($_SERVER['PHP_SELF'], 'contact.php')) echo 'class="current"';?>><a href="contact.php">Contact Me</a></li>
    <li <?php if (strpos($_SERVER['PHP_SELF'], 'portfolio.php')) echo 'class="current"';?>><a href="portfolio.php">My Work</a></li>
 </ul>

希望对你有帮助！

PS：index.php、about.php、contact.php 和 portofolio.php 必须替换为您的页面链接。

【讨论】：

不认为你很理解这个问题 - 我需要将类添加到“li”，而不是链接

【解决方案2】：

你做错了

简单的方法如下..

在您的 URL 中，Itemid 是唯一的，因此最好按照以下方式执行此操作

<li <?php if($Itemid == $_REQUEST['Itemid']) { echo class='current'; } ?> >
   <a href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=109">Link 1</a>
</li>

<li <?php if($Itemid == $_REQUEST['Itemid']) { echo class='current'; } ?> >
   <a href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=110">Link 2</a>
</li>

<li <?php if($Itemid == $_REQUEST['Itemid']) { echo class='current'; } ?> >
   <a href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=111">Link 3</a>
</li>

【讨论】：

他可以将Itemid存储在变量中，很简单...这就是我添加变量$Itemid的原因，他可以比较itemid并生成当前li的输出
是的，他可以在菜单中放入其他外部链接、类别等。我认为它必须获取按钮的 id，并且在 id 活动页面之后（查看本教程，当前 itemID docs.joomla.org/Using_the_Page_Class_Suffix_in_Template_Code )

【解决方案3】：

很简单

<li class="<?php if($Itemid == $_REQUEST['Itemid']) { echo 'active'; } ?> ">

这看起来像是在 HTML 中

<li class="active">

【讨论】：

【解决方案4】：

我不确定您是否需要 Javascript 解决方案。这是我的建议你的 HTML 代码

  <ul id="navigation">
    <li class="current">
      <a href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=109">Link 1</a>
   </li>
   <li>
     <a href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=110">Link 2</a>
   </li>
   <li>
     <a href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=111">Link 3</a>
   </li>
 </ul>

Javascript 代码

url = 'http://www.domain-nane.com/index.php?option=com_content&view=article&id=6&Itemid=111';
   //  url = '<php echo curPageURL();?>';
var urlRegex =/Itemid=([0-9]+)/i;
var Itemid = url.match(urlRegex)[1];
// alert(Itemid);

var nodes = document.getElementById('navigation').childNodes;
var lis;
for(i=0; i<nodes.length; i++) {
    if(nodes[i].nodeType == 1){
      var lis = nodes[i];
      var aElem =   lis.childNodes[1];
      var AItemId = aElem.href.match(urlRegex)[1];
    if(Itemid == AItemId) {
        lis.className = lis.className + " current";
    }
    }
}

运行示例 http://jsfiddle.net/xdsUm/3/

【讨论】：