【问题标题】:Add class="active" to active page using PHP使用 PHP 将 class="active" 添加到活动页面
【发布时间】:2012-10-31 10:23:48
【问题描述】:

动态标题,CSS 类更改为 Active USING PHP(目录)

我希望 <li> 标记的类在活动目录下更改... 现在,每个指南都向我展示了当您的页面等于它时如何做到这一点,但我想改变 <li> 取决于我所在的目录

例如:

如果我说我在
http://example.com/RESOURCES/code/opensource,

http://example.com/RESOURCES/images/clipart
我希望“资源”^^ <li> 是 'class="active"' 而其余的显示 'class="noactive"'

或者如果我在
http://example.com/tutorials/css/flawless-dropdown-menu
我希望“教程”<li> 是 'class="active"' 而其余的是 'class="noactive"'


网址设置:

这是我的网址显示方式的示例...

http://example.com/tutorials/css/flawless-dropdown-menu

^^那个 URL 是教程的页面....在“tutorials”目录下,而不是在“CSS”类别目录下,而不是页面标题(所有这些目录都不是真实的,并且是从 . htaccess) [无关]


导航设置:

<ul id="mainnav">
  <li class="noactive"><a href="/">Home</a></li>
  <li class="active"><a href="/tutorials/">Tutorials</a></li>
  <li class="noactive"><a href="/resources/">Resources</a></li>
  <li class="noactive"><a href="/library/">Library</a></li>
  <li class="noactive"><a href="/our-projects/">Our Projects</a></li>
  <li class="noactive"><a href="/community/">Community</a></li>
</ul>

【问题讨论】:

  • 你需要激活的部分总是第一个片段吗?
  • 如果你想要灵活的代码,你必须在翻译后通过重写代码添加你的真实URL。但是我建议使用 javascript 或 jquery 来实现。
  • 不,这完全取决于我在哪个目录,无论我在多少层目录中,我只是希望它寻找我在什么目录(第一层)

标签: php html css


【解决方案1】:

也许这对你有帮助:

$(document).ready(function()
{
    var parts = document.URL.split("/");
    // [http:, empty, your domain, firstfolder]
    var firstFolder = parts[3];

    $("#mainnav li").attr("class", "noactive");
    $("#mainnav a[href='/" + firstFolder + "/']").parent().attr("class", "active");
});

【讨论】:

  • 这不会影响页面上的所有
  • 吗?
  • 当然可以,但是由于 Alex Sarnowski 没有在他的 ul 上设置任何 id 并且这只是演示代码,我认为这样做是可以的 ;)
  • 如果 id="mainnav".... 不设置 id 太愚蠢了,我怎么可能改变它。
  • @AlexSarnowski 我为你改了。
  • 【解决方案2】:

    使用 jQuery 可能更容易,但这很有效:

    $url='http://example.com/tutorials/css/flawless-dropdown-menu';//pass the current url here instead of a static string.
    $segments = explode ("/",$url);
    
    $menuItems=array('Tutorials','Resources', 'Library', 'Our-Projects','Community');
    
    
    $menu=array();
    foreach ($menuItems as $menuItem) {
    if($segments[3]==strtolower($menuItem)){
        $menu[]=('<li class="active"><a href="/'.strtolower($menuItem).'/">'.str_replace("-"," ",$menuItem).'</a></li>');
    
    } else {
        $menu[]=('<li class="no-active"><a href="/'.strtolower($menuItem).'/">'.str_replace("-"," ",$menuItem).'</a></li>');
    }
    }
    foreach ($menu as $item) {
    echo $item.'<br />';
    }
    

    【讨论】:

      【解决方案3】:

      通过PHP你可以试试-

      <?php 
      // gets the current URI, remove the left / and then everything after the / on the right
      $directory = explode('/',ltrim($_SERVER['REQUEST_URI'],'/'));
      
      // loop through each directory, check against the known directories, and add class   
      $directories = array("index", "tutorials","resources","library","our-projects","community"); // set home as 'index', but can be changed based of the home uri
      foreach ($directories as $folder){
      $active[$folder] = ($directory[0] == $folder)? "active":"noactive";
      }
      ?>
      
      <ul>
        <li class="<?php echo $active['index']?>"><a href="/">Home</a></li>
        <li class="<?php echo $active['tutorials']?>"><a href="/tutorials/">Tutorials</a></li>
        <li class="<?php echo $active['resources']?>"><a href="/resources/">Resources</a></li>
        <li class="<?php echo $active['library']?>"><a href="/library/">Library</a></li>
        <li class="<?php echo $active['our-projects']?>"><a href="/our-projects/">Our Projects</a></li>
        <li class="<?php echo $active['community']?>"><a href="/community/">Community</a></li>
      </ul>
      

      【讨论】:

      • @RickCalder 我不同意,你的回答更好。
      • 这里一切正常,除了 url 目录被识别并应用于代码......但整个、活动、非活动类建立工作。我只是不确定为什么它不能识别目录
      • @AlexSarnowski 你是说$directory = explode('/',ltrim($_SERVER['REQUEST_URI'],'/')); 不起作用吗?即在http://example.com/tutorials/css/flawless-dropdown-menu$directory != tutorials?与您所在的目录相比,您能否回显$directory 以查看它的设置?会不会是case-sensitive 的问题?
      • 我试图回应它,它说“注意:数组到字符串的转换”
      • 是的,我是说当我在 example.com/tutorials/css/flawless-dropdown-menu 时,所有
      • 都是 class="noactive" ,而教程应该是 class="active"
      【解决方案4】:

      想出了答案...我想多了。

      HTML

      <ul id="mainnav">
          <li class="<?php if ($first_part=="") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Home</a></li>
          <li class="<?php if ($first_part=="tutorials") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Tutorials</a></li>
          <li class="<?php if ($first_part=="resources") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Resources</a></li>
          <li class="<?php if ($first_part=="library") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Library</a></li>
          <li class="<?php if ($first_part=="our-projects") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Our Projects</a></li>
          <li class="<?php if ($first_part=="community") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Community</a></li>
      </ul>
      

      PHP

      <?php 
      $directoryURI = $_SERVER['REQUEST_URI'];
      $path = parse_url($directoryURI, PHP_URL_PATH);
      $components = explode('/', $path);
      $first_part = $components[1];
      ?>
      

      【讨论】:

      • 为我工作。但是 PHP 代码可以用这个 $first_part = basename($_SERVER['PHP_SELF'], ".php");
      【解决方案5】:
      <?php  $request_uri= $_SERVER['REQUEST_URI'];?>
      <ul>
       <li class="<?php if((strpos($request_uri,"index.html")!==false) || $request_uri=="" || $request_uri=="/"){echo "selected";}?>"><a href="/index.html">Home</a></li>
      
                      <li class="<?php if((strpos($request_uri,"service")!==false)){echo "selected";}?>"><a href="/services.html">Services</a> </li>
      <li class="<?php if((strpos($request_uri,"product")!==false)){echo "selected";}?>"><a href="/products.html">Products</a></li>
                      <li class="<?php if((strpos($request_uri,"blog")!==false)){echo "selected";}?>"><a href="/blog.html">Blog</a></li>
                      <li class="<?php if((strpos($request_uri,"question")!==false)){echo "selected";}?>"><a href="/question-answers.html">Ques & Ans</a></li>
                      <li class="<?php if((strpos($request_uri,"career")!==false)){echo "selected";}?>"><a href="/career.html">Career</a></li>
                      <li class="<?php if((strpos($request_uri,"about-us")!==false)){echo "selected";}?>"><a href="/about-us.html">About</a></li>
      
      </ul>
      

      【讨论】:

        【解决方案6】:

        header.php

        $activePage = basename($_SERVER['PHP_SELF'], ".php");
        

        nav.php

        <ul>
            <li class="<?= ($activePage == 'index') ? 'active':''; ?>"><a href="/index.php">Home</a></li>
            <li class="<?= ($activePage == 'tutorials') ? 'active':''; ?>"><a href="/tutorials.php">Tutorials</a></li>
        ...
        

        【讨论】:

          【解决方案7】:

          如果你使用 mysql_fetch 定义你的菜单标题行。 如果我们在 mysql 数据库中将您的菜单标题为 MENU 并且您必须输入 (首页、教程、图书馆、资源、我们的项目、社区)

              <?php
          //connect your data bass
          
           include(connection.php');
          
          //get your from ID like www.google?id=1 
          
           $id = $_GET['id'];
              $query = "select * from pages where id='$id'";
              $query1 = mysql_query($query);
              while($row= mysql_fetch_array($query1))
              {
                  ?>
          
          
          <html>
          <?php $active= $row['MENU'];?>
          <ul>
            <li class="<?php if($active=='Home'){echo 'active';}else{echo'noactive';}?>"><a href="/">Home</a></li>
            <li class="<?php if($active=='tutorials'){echo 'active';}else{echo'noactive';}?>"><a href="/tutorials/">Tutorials</a></li>
            <li class="<?php if($active=='resources'){echo 'active';}else{echo'noactive';}?>"><a href="/resources/">Resources</a></li>
            <li class="<?php if($active=='library'){echo 'active';}else{echo'noactive';}?>"><a href="/library/">Library</a></li>
            <li class="<?php if($active=='our-projects'){echo 'active';}else{echo'noactive';}?>"><a href="/our-projects/">Our Projects</a></li>
            <li class="<?php if($active=='community'){echo 'active';}else{echo'noactive';}?>"><a href="/community/">Community</a></li>
          </ul>
          </html>
          <?php };?>
          

          【讨论】:

            【解决方案8】:

            "includes/header.php" - 位于文件顶部

            <?php 
            $activePage = basename($_SERVER['PHP_SELF']);
            
            $index="";
            $nosotros="";
            $cursos="";
            $contacto="";
            
            switch ($activePage) {
                case 'index.php':
                    $index=' class="current"';
                    break;
                case 'nosotros.php':
                    $nosotros=' class="current"';
                    break;
                case 'cursos.php':
                    $cursos=' class="current"';
                    break;
                case 'contacto.php':
                    $contacto=' class="current"';
                    break;
                default:
            
                    break;
                 }
            ?>
            

            这在导航部分进行

            <ul>
                <?php 
                    echo '<li'.$index.'><a href="/"><div>Inicio</div></a></li>';
                    echo '<li'.$nosotros.'><a href="nosotros"><div>Nosotros</div></a></li>';
                    echo '<li'.$cursos.'><a href="cursos"><div>Cursos</div></a></li>';
                    echo '<li><a href="http://www.redtechacademy.com"><div>Academia</div></a></li>';
                    echo '<li><a href="https://www.redtechhackingshop.com"><div>Tienda</div></a></li>';
                    echo '<li'.$contacto.'><a href="contacto"><div>Contacto</div></a></li>';
                ?>
            </ul>
            

            【讨论】:

              【解决方案9】:
               Try the following:
              
              <ul class="sub-menu"> 
                 <div class="h-10"></div>
                 <li class="<?php if ($your_variable=="test") {echo "active"; } 
                   else{echo"noactive";}?>">
                   <a href="test.php">Test </a>
                 </li>
                  <li class="<?php if ($your_variable=="test2") {echo "active"; 
                    } else {echo"noactive";}?>">
                   <a href="test2.php" >Test2</a>
                  </li>
                  <li class="<?php if ($your_variable=="test3") {echo 
                   "active"; } else  {echo "noactive";}?>">
                      <a href="test3.php">Test3</a>
                  </li>
               </ul>
              
               **strong PHP text**
              
               <?php 
                $directoryURI = $_SERVER['REQUEST_URI'];
                 $path = parse_url($directoryURI, PHP_URL_PATH);
                 $components = explode('/', $path);
                 $your_variable = basename($_SERVER['PHP_SELF'], ".php"); 
                ?> 
              

              【讨论】:

                【解决方案10】:

                在这里我们也可以做一个简单的事情:

                <li class="page-scroll <?php if(basename($_SERVER['PHP_SELF'])=="aboutus.php"){echo "active";} ?>"><a href="aboutus.php">About us</a></li>
                

                【讨论】:

                  猜你喜欢
                  相关资源
                  最近更新 更多
                  热门标签