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"); ?>

但是，你们怎么样第一个：组织这个菜单接受和传入的值，比如menu.php + select =“home”和2nd你将如何传递该值以将一个选定的类添加到其中一个菜单项目

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

首先关闭li＆＃34; nav_li＆＃34;是多余的，可以删除。使用.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;
});

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

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

这可以使用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']

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

Answer 4

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

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

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

4 个答案: