Question

所以我在我的网站上工作，每个页面都包含页眉，页脚，菜单的副本。我正在切换它从他们自己的html文件中拉出页脚和标题/菜单。这就是我正在使用的。在page.php我有：

<?php include('header.html'); ?>

在header.html中，我有元标记，标题，徽标和菜单。您可以查看以下菜单代码：

                <ul id="nav" class="main">
                    <li><a href="index">Home</a></li>
                    <li><a href="about">About Us</a></li>
                    <li><a href="contact" class="active">Contact</a></li>
                </ul>

这并不重要，但这是我的css： .nav {list-style：none;保证金：0 0 1.5em 0;}

/*Add a class of centred/centered to create a centred nav.*/

#nav.main{
float: right;
text-align:center;
margin: 0 0 0 0;
padding: 0 0;
font-family:'Oswald', Arial, sans-serif;
}
#nav.main li {display:inline; float:none;}

#nav.main a{
display:inline-block;
padding: 0.6em 1.2em;
background-color: #EFEFEF;
border-radius: 10px;
border-right: 1px solid #bbb;
border-bottom: 2px solid #bbb;
color: #666;text-decoration:none; 
text-transform:uppercase; 
text-shadow: 1px 1px 1px #fff;
font-size: 1.1em;
margin: 0 0 0em 0;  
}
#nav.main a:hover{color: ; text-shadow: 1px 1px 0px #fff; background-color: #ffd27f; }

#nav.main a.active{color: #fff; text-shadow: 1px 1px 1px #333; font-weight: bold; background-color: #FF8307; letter-spacing: 1px;}

#nav li span {display: block; font-size: 10px; color: #666; text-shadow: none; line-height: 8px;}

如果我将其作为所有页面的活动状态，则所有页面都将显示为联系人处于活动状态。我如何做到这一点，以便它知道我在哪个页面并自己做？我想也许可以使用JavaScript，但我该怎么办呢？

注意：这只是一个简单的php和html网站。

编辑：

我做了@barmar所说的但知道它有效但是菜单失去了填充和对齐，看起来很奇怪为什么会这样？我附上了之前和之后的图像。

Picture of new menu

Picture of old menu

编辑编辑：我的旧菜单看起来像上面的代码。这是我的新菜单，其样板仍然出现错误，如上图2所示。

<?php 
function show_header($this_page) {
    $navs = array('index' => 'Home', 'media' => 'Pictures & Videos', 'about' => 'About Us', 'donate' => 'Donate', 'contact' => 'Contact');
    ?>
    <!-- boilerplate stuff here -->
    <ul id="nav" class="main">
    <?php
    foreach ($navs as $href => $text) {
        $active = $href == $this_page ? "class='active'" : '';
        echo "<li><a href='$href' $active>$text</a></li>";
    }
    ?>
    </ul>
    <!-- more boilerplate -->
    <?php
}
?>

Answer 1

使用PHP脚本代替硬编码的HTML文件，并让它定义一个函数。

的header.php：

function show_header($this_page) {
    $navs = array('index' => 'Home', 'about' => 'About Us', 'contact' => 'Contact');
    ?>
    <!-- boilerplate stuff here -->
    <ul id="nav" class="main">
    <?php
    foreach ($navs as $href => $text) {
        $active = $href == $this_page ? "class='active'" : '';
        echo "<li><a href='$href' $active>$text</a></li>";
    }
    ?>
    </ul>
    <!-- more boilerplate -->
    <?php
}

然后页面将包含：

<?php require("header.php");
      show_header("contact");
?>

Answer 2

有很多方法可以做到这一点但是这个问题被贴上标签＆＃34; javascript＆＃34;最简单的方法是从ul#nav中的每个li-tag开始使用某种形式的标识符，例如唯一的＆＃39;类＆＃39;或者＆＃39; id＆＃39;属性。然后你可以“瞄准”＆＃39;具有脚本函数的特定元素，并从内容文件中的其他位置调用该函数。有点像...

/* CSS : style anchor-tags if li-tag has class 'active' */
#nav li.active a {
    text-decoration:underline;
}


/* JavaScript : in the head-tag of 'header.html' */
function setActive(activeElement) {
    var navlist = document.getElementById('nav');
    var listtags = navlist.getElementsByTagName('li');
    var listLength = listtags.length;
    for (var i = 0; i < listLength; i++) {
        if (listtags[i].id === activeElement) {
            listtags[i].setAttribute('class','active');
        }
    }
}

/* OR JQuery : in the head-tag of 'header.html' */
function setActive(activeElement) {
    $('#'+activeElement).addClass('active');
}
// (this is why we love JQuery !)

/* HTML : in the body-tag of 'header.html' */
<ul id="nav" class="main">
    <li id="home"><a href="index">Home</a></li>
    <li id="about"><a href="about">About Us</a></li>
    <li id="contact"><a href="contact">Contact</a></li>
</ul>

然后在你的内容文件中的某个地方（包括你的内容，包括＆＃39; home.html＆＃39;，＆＃39; about.html＆＃39;，和/或＆＃39; contact.html＆＃39;）调用函数...

<script>
    window.onload = function() {setActive('about')};
</script>

...制作<li id="about" class="active"> ... </li>等。

重新更新问题：在您可能在单独的行上放置<li>标记之前，在文档中填充了一些空格和/或制表符空格，现在是{{1}标签互相贴着而不间断。尝试在...结束时添加额外的空间。

<li>

...或添加换行符echo "<li><a href='$href' $active>$text</a></li> "; // <-- extra space（请参阅Stackoverflow: How to add a line break within echo in PHP?）。或许可以检查编辑器的首选项来处理空格和制表符空格等。

如何修复植入标题上的菜单？

2 个答案: