如何在 PHP/HTML 中将特定的类名传递给特定的标签

Question

我还是前端开发的新手，正在写我的第一个非常大的网站/wordpress 博客。

所以我的问题是，我有一个在网站上的所有页面上都相同的菜单。但是，每个部分的名称都会在菜单导航中突出显示。

当前的 Nav_Bar 标记：

<div id="nav_bar">

    <ul class="nav">
        <li class="nav_li"><a href="../index.html">Home</a></li>
        <li class="nav_li"><a href="#">About</a></li>
        <li class="nav_li selected"><a href="#blog_content">Blog</a></li>
        <li class="nav_li"><a href="#">Book</a></li>
        <li class="nav_li"><a href="#">Media</a></li>
        <li class="nav_li"><a href="#">Events</a></li>
        <li class="nav_li"><a href="#">Services</a></li>
        <li class="nav_li"><a href="#">Contact</a></li>

        <li class="search">
            <input type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" />

        </li>

        <li class="search_btn">
            <a href="#" title="Lets find it!"><div class="search_button">Go</div></a>
        </li>

    </ul>

</div><!-- nav_bar -->

现在我已经在使用这个简单的 PHP 代码之前构建了页面：<?php include("menu.php"); ?>

但是，你们将如何 1st：组织此菜单以接受和传入值，例如 menu.php+select="home" 和 2nd 您将如何传递该值以向其中一个 Menu 添加一个 selected 类物品？

Answer 1

我假设您希望您的“传入值”用于突出显示菜单项（而不是显示特定页面）？这是不必要的，因为浏览器已经知道它在哪个页面上。

这是在 jQuery 中突出显示当前页面的一种方式：

$('.nav li a').each(function(){
  var link = $(this).attr('href'),
    current_page = location.href;
  if(current_page.indexOf(link) != -1) {
      $(this).addClass('current-page');
  }
});

Answer 2

这可以使用 javascript 来完成

var url=document.location.toString();
if(url=="http://www.something.com/some.php")
{
//code to add class to specific link
}
else if(url=="http://www.something.com/someelse.php")
{
//code to add class to specific link
}

您也可以在 menu.php 中的服务器端执行此操作

$url=$_SERVER['REQUEST_URI'] 

然后检查 url 并相应地添加类名

Answer 3

在包含之前，在某个参数中设置一个值，例如$page = 'blog'，然后在menu.php中设置一个值

<li class="nav_li<?php echo $page === 'blog' ? " selected='selected'" : "" ?>"><a href="#blog_content">Blog</a></li>

Answer 4

首先你在 li "nav_li" 上的课程是多余的，可以删除。使用 .nav li 以更少的代码行来引用这些列表项。这既可以用作 JQuery 选择器，也可以用作 CSS 选择器。第二，回答你的实际问题；我会按如下方式使用活动类：

// Assuming the following html. <ul class="nav"><li><a href="/about.php">About</a></li></ul>    

$('.nav li').click(function() {
    $('.nav li.active').removeClass('.active');
    $(this).addClass('.active');
    window.location = $(this).children('a').attr('href');
    return;
});

现在，在您保留导航栏的区域，您可以通过以下方式检查当前 url 是否处于活动状态：

<?php    
$currentUri = $_SERVER['REQUEST_URI'];
<ul class="nav">
    <li class="<?php if($currentUri == '/about.php') {echo 'active';} ?>"><a href="/about.php">About</a></li>
</ul>

将 php 脚本中的条件添加到每个列表项。

真诚地， 凯文

Answer 5

如果我了解您的需求，可能是这样的：

index.php：

<?php
  $page = 'home';
  // page code ...
?>

about.php：

<?php
  $page = 'about';
  // page code ...
?>

等等等等……

然后menu.php稍作调整：

<div id="nav_bar">

  <ul class="nav">
    <li class="nav_li home"><a href="../index.html">Home</a></li>
    <li class="nav_li about"><a href="#">About</a></li>
    <li class="nav_li blog"><a href="#blog_content">Blog</a></li>
    <li class="nav_li book"><a href="#">Book</a></li>
    <li class="nav_li media"><a href="#">Media</a></li>
    <li class="nav_li events"><a href="#">Events</a></li>
    <li class="nav_li services"><a href="#">Services</a></li>
    <li class="nav_li contact"><a href="#">Contact</a></li>

    <li class="search">
        <input type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" />

    </li>

    <li class="search_btn">
        <a href="#" title="Lets find it!"><div class="search_button">Go</div></a>
    </li>

  </ul>

</div><!-- nav_bar -->

最后是一些javascript：

<script>
  $(function () {
   $('#nav_bar li.<?=$page?>').addClass('selected');
  });
</script>

假设正在使用 jQuery，但显然没有必要，直接使用 javascript 也可以做到这一点。