3

不久前我推出了一个网站，并成功使用 Javascript + CSS 在导航中突出显示当前页面。但是，它在 Safari 中不起作用，并且在使用 Javascript 时无法很好地验证，所以我决定让 PHP 将 CSS id 分配给 HTML 元素。到目前为止，它工作正常，与在 PHP 中尝试时每个链接显示两个的其他时间相比。我的问题是所有链接看起来都很正常并且没有应用 CSS 属性。我感觉它与我的 PHP 代码有关，但我不确定。

网站地址在这里

至于PHP代码，这里是：

<?php
echo('<li><span class="bold">Main</span>');
echo('<ul>');
if ($page=="home")
{
echo('<li><a id="current" href="index.shtml">Home</a></li>');
}
else
{
echo('<li><a href="index.shtml">Home</a></li>');
}
if ($page=="faq")
{
echo('<li><a id="current" href="faq.shtml">FAQ</a></li>');
}
else
{
echo('<li><a href="faq.shtml">FAQ</a></li>');
}
if ($page=="about")
{
echo('<li><a id="current" href="about.shtml">About Bryce</a></li>');
}
else
{
echo('<li><a href="about.shtml">About Bryce</a></li>');
}
echo('<li><a href="contact.php">Contact Bryce</a></li>');
if ($page=="sign guestbook")
{
echo('<li><a id="current" href="sign.shtml">Sign Guestbook</a></li>');
}
else
{
echo('<li><a href="sign.shtml">Sign Guestbook</a></li>');
}
if ($page=="view guestbook")
{
echo('<li><a id="current" href="view.shtml">View Guestbook</a></li>');
}
else
{
echo('<li><a href="view.shtml">View Guestbook</a></li>');
}
echo('</ul>');
echo('</li>');
echo('<li><span class="bold">Info</span>');
echo('<ul>');
if ($page=="projects")
{
echo('<li><a id="current" href="projects.shtml">Projects</a></li>');
}
else
{
echo('<li><a href="projects.shtml">Projects</a></li>');
}
if ($page=="books")
{
echo('<li><a id="current" href="books.shtml">Books</a></li>');
}
else
{
echo('<li><a href="books.shtml">Books</a></li>');
}
echo('</ul>');
echo('</li>');
echo('<li><span class="bold">Misc.</span>');
echo('<ul>');
if ($page=="cover designs")
{
echo('<li><a id="current" href="coverdesigns.shtml">Cover Designs</a></li>');
}
else
{
echo('<li><a href="coverdesigns.shtml">Cover Designs</a></li>');
}
echo('<li><a target="_blank" href="http://www.lulu.com/brycecampbellsbooks">Lulu Store</a></li>');
echo('<li><a href="rss/">RSS</a></li>');
echo('</ul>');
echo('</li>');

?>

为了让你们了解高亮效果应该是什么样子，下面是应该应用于当前页面的 CSS：

#current {
   font-style: italic;
   text-decoration: none;
   color: #000000;
  }

当查找我做错了什么时，它告诉我我正在正确地实现它，但似乎 PHP 并没有获取这些值。

4

5 回答 5

4

看在上帝的份上，不要使用那个代码！！！！做这个！

<li><a href=""<?php if($page=='about'): ?> id="current"<?php endif; ?>>about</a></li>
<li><a href=""<?php if($page=='otherpage'): ?> id="current"<?php endif; ?>>other page</a></li>

你给了 php 仇恨者更多的弹药！

于 2010-05-10T18:20:59.503 回答
1

尝试：

echo $page;

看看你得到了什么。你能发布分配的代码$page吗？

于 2010-05-10T18:13:55.677 回答
1

在使用 php 编程多年，并通过长时间的反复试验学习了不该做什么之后，这里有一些总体建议，可根据该代码使您的调试和生活更轻松：

  • 在你的 php 和你的 html 之间做一个非常清晰的分离。换句话说，将您的应用程序的 html 放在模板中。这些模板至少可以是您包含的 php 文件，这些文件具有最少的实际所需 php。除了最低限度之外，如果您使用第三方模板系统，它可能会更容易。我推荐聪明的。完全有可能通过良好的纪律将所有内容很好地分开，但在一开始使用良好的模板系统将事情分开要容易得多。

  • 一般来说，在 php 中，当我们从 $_REQUEST 中提取输入以及从数据存储/数据库中提取数据并对它们进行操作时，我们通常可以知道页面应该是什么样子。因此，一旦我们完全按照我们想要的方式获得了所有数据，我们应该能够拥有一个涉及操作输入数据的整个部分，然后只需将所有内容传递给一个模板，其中包含一些最小的显示逻辑来显示最终页面的外观. 例如，而不是

    if($page == 'about'){ echo "<a href='about.php'>About</a>"; }

    确定 html 之外的数据类型，然后再传递该确定，例如

    $possible_links = array('about'=>array('href'='about.php', 'text'=>'About'), 'other'=>array('href'=>'other.php', 'text'='other pages')); $current_link = $possible_links[$current]; ... ... in separate script, optimally: ... echo "<a href='".$current_link['href'].">".$current_link['text']."";

`

  • 在您自己的代码中，尝试使用 MVC 模式查看框架，以获得非常强大的分离技术。显然，如果您正在处理其他人的遗留代码，那并不容易，因此在这种情况下，请尽量将事情分开（尤其是 php 中的 html）。
于 2010-05-10T21:08:09.477 回答
0

这可能是一种更简单的方法来做你想做的事：

<?php
// heredoc syntax ftw!
$menu = <<<MENU
<ul id="nav">
 <li><a href="/">Home</a></li>
 <li><a href="/foo">Foo</a></li>
 <li><a href="/bar">Bar</a></li>
 <li><a href="/baz">Baz</a></li>
 <li><a href="/inga">Inga</a></li>
</ul>
MENU;
$lines = split("\n", $menu);
foreach ($lines as $line) {
 $current = false;
 preg_match('/href="([^"]+)"/', $line, $url);
 if (substr($_SERVER['REQUEST_URI'], 0, 5) === substr($url[1], 0, 5)) {
  $line = str_replace('<li><a h', '<li class="current"><a h', $line);
 }
 echo $line."\n";
}
?>

只需$menu在顶部进行编辑，脚本将处理其余部分。

于 2010-05-10T21:41:37.290 回答
-2

我在您的 php 代码中没有发现任何问题。更好的是你能改变你的CSS如下...

。当前的 {
   字体样式：斜体；
   文字装饰：无；
   颜色：#000000；
  }
于 2010-05-10T18:20:18.910 回答