Question

我正在起草一个新网站，并且在子页面上突出显示父页面时遇到一些问题。我将解释我正在使用的系统，然后我尝试了什么。

对于单个顶级项目，我使用：

PHP：

<?php $currentPage = basename($_SERVER['SCRIPT_NAME']); ?>

位于页面顶部，然后是：

<ul>
<?php echo "\n"; if ($currentPage == '#') { ?><li class="on">News</li><?php } else { ?><li class="off"><a href="#">News</a></li><?php } ?>
</ul>

下降：

<li><a href="#" class="none">About</a>
<ul>
<?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">Club</li><?php } else { ?><li class="off"><a href="../club.php">Club</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'coaches.php') { ?><li class="on">Coaches</li><?php } else { ?><li class="off"><a href="../coaches.php">Coaches</a></li><?php } ?>    
<?php echo "\n"; if ($currentPage == 'officials.php') { ?><li class="on">Officials</li><?php } else { ?><li class="off"><a href="../officials.php">Officials</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'management.php') { ?><li class="on">Management Team</li><?php } else { ?><li class="off"><a href="../management.php">Management</a></li><?php } ?>
</ul>
</li>
</ul>

样式：

CSS：

.nav {
width: 990px;
height: 60px;
}

.nav ul {
margin-left: 0px;
padding-left: 0px;
width: auto;
}

.nav ul li {
float: left;
list-style-type: none;
position: relative;
}

.nav ul li a {
color: #666;
font-size: 14px;
text-decoration: none;
background-color: #fff;
display: block;
height: 36px;
width: 110px;
text-align: center;
line-height: 36px;
padding-bottom: 0px;
}

a.none {
cursor: default;
}

.nav li:hover > a {
background-color: #181d63;
text-decoration: none;
color: #fff;
}

.nav ul ul {
position: absolute;
visibility: hidden;
display: block;

}

.nav li ul li a {
background-color: #e5e5e5;
color: #000;
top: 38px;
text-align: center;
font-size: 12px;
}   

.nav li ul li a:hover {
background-color: #CCC;
color: #000;
top: 38px;
text-align: center;
}

.nav li:hover ul {
visibility: visible;
background-color: #181d63;
}

.on { 
color: #fff;
font-size: 14px;
text-decoration: none;
background-color: #181d63;
display: block;
height: 36px;
width: 110px;
text-align: center;
line-height: 36px;
cursor: default;

}

.off { 

}

这很有效，并突出显示已打开的页面，即顶层或下拉页面。我想这样做，以便在任何子页面上也会突出显示顶级父级。

我试过了：

PHP：

<ul>
<li><?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">About</li><?php } else { ?><li class="off"><a href="#" class="drop">About</a><?php } ?>
<ul>
<?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">Club</li><?php } else { ?><li class="off"><a href="../club.php">Club</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'coaches.php') { ?><li class="on">Coaches</li><?php } else { ?><li class="off"><a href="../coaches.php">Coaches</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'officials.php') { ?><li class="on">Officials</li><?php } else { ?><li class="off"><a href="../officials.php">Officials</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'management.php') { ?><li class="on">Management Team</li><?php } else { ?><li class="off"><a href="../management.php">Management</a></li><?php } ?>
</ul>
</li>
</ul>

将以下内容添加到css：

CSS：

a.drop {
}

a.drop:hover {
visibility: visible !important;
background-color: #181d63;
}

此时，我遇到了两件事。

加入＆＃39; club.php＆＃39;页面现在突出显示父级。

我不确定如何添加到php以合并其所有子页面。（＆＃39;第1页＆＃39;，＆＃39;第2页＆＃39;）似乎无法奏效。

虽然现在突出显示父级，但该菜单项不再下降。

我认为我需要创建一个.onchild条件，当应用于顶级父级时，仍然允许下拉，但我真的很不知道如何解决这个问题，并且似乎有所偏差从我的原始代码！我很想在PHP和CSS中保留这一切，如果可能的话，不要求助于jquery。

Answer 1

为什么不在父母中添加孩子＆＃39;如果＆＃39;？

<ul>
<li><?php echo "\n"; if ($currentPage == 'club.php' || $currentPage == 'coaches.php' || $currentPage == 'officials.php' || $currentPage == 'management.php') { ?><li class="on">About</li><?php } else { ?><li class="off"><a href="#" class="drop">About</a><?php } ?>
<ul>
<?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">Club</li><?php } else { ?><li class="off"><a href="../club.php">Club</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'coaches.php') { ?><li class="on">Coaches</li><?php } else { ?><li class="off"><a href="../coaches.php">Coaches</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'officials.php') { ?><li class="on">Officials</li><?php } else { ?><li class="off"><a href="../officials.php">Officials</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'management.php') { ?><li class="on">Management Team</li><?php } else { ?><li class="off"><a href="../management.php">Management</a></li><?php } ?>
</ul>
</li>
</ul>

编辑：或者您可以使用in_array

$array = array('club.php', 'coaches.php', 'etc');
if(in_array($currentPage, $array)) { /* do code */ }

突出显示菜单父级 - CSS＆amp; PHP问题

1 个答案: