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

我对前端开发还是一个新手，我的第一个真正大的网站/wordpress博客还在工作

所以我的问题是，我有一个菜单，它在网站的所有页面上都是一样的。但是，每个部分的名称将在菜单Nav中突出显示

当前导航栏标记：

<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代码之前构建了页面：

---

然而，你们将如何第一：组织此菜单以接受和传入值，如menu.php+select=“home”；第二，如何传入该值以向其中一个菜单项添加一类选定值？

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

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

$（'.nav li a'）。每个（函数（）{
var link=$（this.attr（'href'），
当前页面=location.href；
如果（当前页面索引）（链接）！=-1）{
$（this.addClass（'current-page'）；
}
});

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

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

$（'.nav li a'）。每个（函数（）{
var link=$（this.attr（'href'），
当前页面=location.href；
如果（当前页面索引）（链接）！=-1）{
$（this.addClass（'current-page'）；
}
});

这可以使用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并相应地添加类名

这可以使用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并相应地在include之前添加类名，在一些参数中设置一个值，比如

$page='blog'

，然后在menu.php中设置

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

---

在include之前，在一些参数中设置一个值，比如
$page='blog'
，然后在menu.php中设置

<li class="nav_li<?php echo $page === 'blog' ? " selected='selected'" : "" ?>"><a href="#blog_content">Blog</a></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;
});

//假设使用以下html

$（'.nav li'）。单击（函数（）{
$（'.nav li.active'）.removeClass（'.active'）；
$（this.addClass（'.active'）；
window.location=$（this.children（'a'）.attr（'href'）；
返回；
});

现在，在保留导航栏的区域中，通过以下方式检查当前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>

首先，你的课堂上的“导航”是多余的，可以删除。使用.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;
});

//假设使用以下html

$（'.nav li'）。单击（函数（）{
$（'.nav li.active'）.removeClass（'.active'）；
$（this.addClass（'.active'）；
window.location=$（this.children（'a'）.attr（'href'）；
返回；
});

现在，在保留导航栏的区域中，通过以下方式检查当前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>

如果我理解了你的目标，可能是：

index.php：

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

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



关于.php：

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

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


$（函数（）{
$（'nav#u bar li.'）。addClass（'selected'）；
});

这假设正在使用jQuery，但显然没有必要，同样的事情也可以用纯javascript来完成。
如果我理解您的意图，可能类似于：

index.php：

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

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



关于.php：

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

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


$（函数（）{
$（'nav#u bar li.'）。addClass（'selected'）；
});

这假设使用了jQuery，但显然没有必要，使用纯javascript也可以做到这一点。
谢谢你的帮助！虽然我不得不将它改为：所以在每个
中都嵌入了一个三元运算符？@msinfo是的。这不是最优雅的解决方案，但它可以工作（即使客户端禁用了Javascript）。谢谢你，它成功了！虽然我不得不改变它