突出显示导航栏中的当前列表项

时间:2013-01-08 08:24:53

标签: css

我在每个导航栏的网页中都包含头文件,如何显示当前页面已激活/突出显示?

<div id="header"><div  id="nav">
            <ul id="menu">
            <?php
$CurrentPage = $path_parts = pathinfo(__FILE__,PATHINFO_FILENAME); // u will get the current page name "index.php", home.php etc..
?>
                <?php
                if(!logged_in())
                {
                echo "<li id=\"<?php echo ($CurrentPage=='Home') ? 'current' : ''?>\" style=\"background-color: #CCFFFF;\" ><a href=\"index.php\">Home</a></li>";
                }
                ?>
                <?php
                if(logged_in())
                {
                echo "<li id=\"<?php echo ($CurrentPage=='Home') ? 'current' : ''?>\" style=\"background-color: #CCFFFF;\" ><a href=\"index.php\">Home</a></li>";
                }
                ?>
                <?php
                echo "<li id=\"<?php echo ($CurrentPage=='Contact Us') ? 'current' : ''?>\" style=\"background-color: #66FFFF;\"><a href=\"contact.php\">Contact Us</a></li>";

                ?>
            </ul>
            </div></div>

如何为id="current"

添加此CSS
#header #nav ul li#current a {  
    background: transparent url(../images/current.gif) repeat-x left bottom;    
    color: #222;    
}

1 个答案:

答案 0 :(得分:1)

您可以使用

#nav #menu #current a

而不是

#header #nav ul li#current a

也许您应该添加#header,但我在上面的代码中没有看到任何#header。

<style>
#header #nav #menu #current a {  
    background: transparent url(../images/current.gif) repeat-x left bottom;    
    color: #222;    
}
</style>


    <div id="header"><div  id="nav">
            <ul id="menu">
            <?php
$CurrentPage = $path_parts = pathinfo(__FILE__,PATHINFO_FILENAME); // u will get the current page name "index.php", home.php etc..
?>
                <?php
                if(!logged_in())
                {
                echo "<li id=\"<?php echo ($CurrentPage=='Home') ? 'current' : ''?>\" style=\"background-color: #CCFFFF;\" ><a href=\"index.php\">Home</a></li>";
                }
                ?>
                <?php
                if(logged_in())
                {
                echo "<li id=\"<?php echo ($CurrentPage=='Home') ? 'current' : ''?>\" style=\"background-color: #CCFFFF;\" ><a href=\"index.php\">Home</a></li>";
                }
                ?>
                <?php
                echo "<li id=\"<?php echo ($CurrentPage=='Contact Us') ? 'current' : ''?>\" style=\"background-color: #66FFFF;\"><a href=\"contact.php\">Contact Us</a></li>";

                ?>
            </ul>
            </div></div>