Question

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

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

现在我需要根据访问的页面将“selected”类添加到列表项（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>

谢谢！

Answer 1

这是简单的方法，纯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
}

Answer 2

在您的网址结构中，您可以使用$_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>';
}

Answer 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>

Answer 4

使用JQuery，您可以动态地将“当前”类添加到$（'nav＆gt; ul＆gt; li＆gt; a'）的父级，其绝对href将指向您当前正在查看的页面。

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

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

Answer 5

我仍然是相对较新的php所以我不能说这是最佳实践还是黑客行为，但它确实有效。

我知道这是一个古老的话题，但我有一个解决方案可以解决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的其他方法，这也会更好。

关于解决方案是好还是坏的任何反馈也值得赞赏！

Answer 6

$ page =“”; ？＆GT; ＆LT; UL＆GT; ＆LT; PHP if（$ page =“home”） echo“＆lt; li class ='selected'＆gt;＆lt; a href ='home.html'＆gt; home＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a href ='bio.html'＆gt; bio＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a href ='contact.html'＆gt;联系＆lt; / a＆gt;＆lt; / li＆gt;“; 否则如果（$ page =“bio”） echo“＆lt; li＆gt;＆lt; a href ='home.html'＆gt; home＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li class ='selected'＆gt;＆lt; a href ='bio.html'＆gt; bio＆lt; / a＆gt;＆lt; / li＆gt;＆lt; li＆gt;＆lt; a href ='contact.html'＆gt; contact＆lt; / A＆GT;＆LT; /锂＆gt;“中; 否则if（$ page =“content”） echo“＆lt; li＆gt;＆lt; a href ='home.html'＆gt; home＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a href ='bio.html'＆gt; bio＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li class ='selected'＆gt;＆lt; a href ='contact.html'＆gt; contact＆lt; / a＆gt;＆lt; / li＆gt;“;

这真的很粗糙，而且有一百万种更好的方法来编写代码，我敢肯定，但是现在就去了。

根据页面名称添加class元素

6 个答案: