1

我还是前端开发的新手，并且在我的第一个非常大的网站/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 您将如何传递该值以向其中一个菜单项添加一个 selected 类？

4

5 回答 5

2

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

这是在 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');
  }
});
于 2012-09-24T16:41:52.367 回答
2

首先，您在 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 脚本中的条件添加到每个列表项。

真诚的，凯文

于 2012-09-24T17:20:26.437 回答
1

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

<li class="nav_li<?php echo $page === 'blog' ? " selected='selected'" : "" ?>"><a href="#blog_content">Blog</a></li>
于 2012-09-24T16:46:02.527 回答
1

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

于 2012-09-24T16:42:46.740 回答
1

如果我理解你的追求，也许是这样的：

索引.php：

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

关于.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 来完成。

于 2012-09-24T17:32:23.577 回答