从页面url向li添加活动类

时间:2013-07-04 10:11:27

标签: php css class url

我使用以下内容获取活动页面网址:

<?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'中添加一个'current'类 - 取决于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>

任何提示/想法?

4 个答案:

答案 0 :(得分:2)

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

 <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必须替换为您的网页链接。

答案 1 :(得分:2)

你做错了事

简单的方法如下..

在您的网址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>

答案 2 :(得分:0)

简单

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

这看起来像是HTML

<li class="active">

答案 3 :(得分:0)

我不确定你是否想在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/