【问题标题】:Add class element based on the name of the page根据页面名称添加类元素
【发布时间】:2011-12-18 02:37:15
【问题描述】:

我有一个包含 5 个导航部分的小网站。

为了避免在必须添加更多部分时更改每个页面上的代码,我在每个页面的导航部分使用 php include。

现在我需要根据访问的页面将“选定”类添加到列表项 (li)。这个怎么做?因为现在导航是独一无二的。

这是代码

            <nav>
                <ul>
                    <li class="selected"><a href="index.php">Home</a></li>
                    <li><a href="biography.php">Bio</a></li>
                    <li><a href="photo.php">Photo</a></li>
                    <li><a href="work.php">Work</a></li>
                    <li class="last"><a href="contact.php">Contact</a></li>
                </ul>
                <div class="clear"></div>
            </nav>

谢谢!

【问题讨论】:

  • 您的网址的结构是什么?您必须从 URL 中识别当前页面并相应地设置选择的导航项
  • 感谢 Vikk 的提问,现在我添加代码

标签: php css class include


【解决方案1】:

我对 php 还比较陌生,所以我不能说这是最佳实践还是 hack,但它确实有效。

我知道这是一个老话题,但我有一个解决方案可以解决 Frederik 在 Chris Sobolewski 的帖子中提出的问题。

我们假设您有一个页眉(包含链接)和页脚模板,并且不希望为每个页面创建新的页眉。

由于每个链接都将我们带到具有唯一页面名称的新页面,因此我们可以使用它为每个链接提供一个 id。或者,我们可以使用 $_GET 中的参数,具体取决于您的导航设置。

在您的示例中,我们可以使用如下内容:

<nav>
    <ul>
        <li class="selected"><a href="index.php" id="indexLink">Home</a></li>
        <li ><a href="biography.php" id="biographyLink">Biography</a></li>
        <li ><a href="photo.php" id="photoLink">Photo</a></li>
        <li ><a href="work.php" id="workLink">Work</a></li>
        <li ><a href="contact.php" id="contactLink">Contact</a></li>

    </ul>
    <div class="clear"></div>
</nav>

现在在我们的 php 文件中,我们可以使用我们喜欢的任何技术来操作 DOM,从当前活动的链接中添加和删除活动类。

请记住,我是新手,如果这不是操作 DOM 的最佳实践,请原谅我,但这就是我的处理方式:

?php
  function curPageName() {
    $pageName = substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
    return trim($pageName, ".php");
  }

  //string to find the active class
  $classString=' class="activeLink"';

  //String to find the current page link
  $pageString='id="'.curPageName().'Link"';

  //String to set the current page link active
  $activeString='id="'.curPageName().'Link" class="activeLink"';

  //load the html from the header file
  $fileContents=file_get_contents("header.html");

  //Remove the old active class
  $newHtmlContent=str_replace($classString, "", $fileContents);

  //Set the new active class
  $newHtmlContent=str_replace($pageString, $activeString, $newHtmlContent);

  //Save the manipulated HTML
  file_put_contents("header.html",$newHtmlContent);
?>

然后在你的 CSS 中简单地设置你想要的 activeLink 样式。

我很想简单地搜索 URL 来修改头文件的 DOM,但是如果在文档中的其他地方有任何其他指向同一页面的链接,我们不希望它们也被样式化。所以我想最好添加一个ID。如果我们在 php 中使用其他一些操作 DOM 的方法,这也会更好。

任何关于解决方案是好的还是坏的做法的反馈也很感激!

【讨论】:

    【解决方案2】:

    使用 JQuery,您可以将“当前”类动态添加到 $('nav > ul > li > a') 的父级,其绝对 href 指向您当前正在查看的页面。

    $(document).ready(function(){
        $('nav > ul > li > a').each(function(){
            if (window.location.indexOf($(this).prop('href'))!=-1) {
                $(this).parent().addClass("current");
            }
        });
    });
    

    因此,每当菜单加载到页面时,“当前”类都会添加到导航中的正确位置。

    【讨论】:

      【解决方案3】:

      这是一个解决方案,将新页面添加到 pages 数组中:

      <?php
      $current_page = basename($_SERVER['REQUEST_URI']);
      $pages = array('index','biography','photo','work','contact');
      if(!in_array($current_page,$pages)){$current_page='index';}
      
      $menu = "\n<nav>\n\t<ul>\n";
      foreach($pages as $link){
          $menu.="\t\t<li ".(($link==$current_page)?'class="selected"':'')."><a href=\"".$link.".php\">".(($link=='index')?'Home':ucfirst($link))."</a></li>\n";
      }
      $menu .= "\t</ul>\n\t<div class=\"clear\"></div>\n</nav>";
      
      echo $menu;
      ?>
      

      输出:

      <nav>
          <ul>
              <li class="selected"><a href="index.php">Home</a></li>
              <li ><a href="biography.php">Biography</a></li>
              <li ><a href="photo.php">Photo</a></li>
              <li ><a href="work.php">Work</a></li>
              <li ><a href="contact.php">Contact</a></li>
      
          </ul>
          <div class="clear"></div>
      </nav>
      

      【讨论】:

        【解决方案4】:

        这是一种简单的方法,纯 CSS 无需任何编程:为您的正文和链接添加一个 ID:

        <body id='home'>
            <nav>
                <ul>
                    <li id='home-link'><a href="index.php">Home</a></li>
                    <li id='bio-link'><a href="biography.php">Bio</a></li>
                    <li id='photo-link'><a href="photo.php">Photo</a></li>
                    <li id='work-link'><a href="work.php">Work</a></li>
                    <li id='contact-link'class="last"><a href="contact.php">Contact</a></li>
                </ul>
                <div class="clear"></div>
            </nav>
        

        现在,您只需像这样设置样式:

        #home #home-link, #bio #bio-link, #photo #photo-link, #work #work-link, #contact #contact-link{
            //however you would have styled .active
        }
        

        【讨论】:

        • 唯一的问题是,当您想要模板化您的正文部分时,您仍然需要知道要在哪个页面中获取正确的正文 id
        【解决方案5】:

        在您的 URL 结构中,您可以使用$_SERVER['PHP_SELF'] 来标识当前页面。

        $nav = array(
        'Home'  => 'index.php',
        'Bio'   => 'biography.php',
        'Photo' => 'photo.php',
        'Work'  => 'work.php',
        'Contact' => 'contact.php'
        );
        
        foreach($nav as $nav_title => $nav_link)
        {
            echo '<li '.($nav_link == basename($_SERVER['PHP_SELF']) ? 'class="selected"':'').'><a href="'.$nav_link.'">'.$nav_title.'</a></li>';
        }
        

        【讨论】:

          【解决方案6】:

          $page = ""; ?>

          【讨论】:

          • 这不是反对的决定。我知道怎么做。我从像你这样的笨蛋那里得到了很多snipy cmets.... cmets,没有方向。谢谢笨蛋!
          • meta.stackexchange.com/questions/22186/… 并不是想取笑,只是想弄清楚原因,将其视为您在 2000 年代表的系统部分的巨大失败
          猜你喜欢
          • 2020-07-03
          • 1970-01-01
          • 1970-01-01
          • 2010-11-11
          • 1970-01-01
          • 2021-02-05
          • 1970-01-01
          • 2013-09-17
          • 2021-10-27
          相关资源
          最近更新 更多