菜单突出显示使用PHP

时间:2017-03-02 06:18:29

标签: php html css

我正在尝试使用php

突出显示所选选项

我的css如下

ul.leftmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #ffffff;
}

ul.leftmenu li a {
    display: block;
    color: #2e3e49;
    padding: 10px 16px 10px 35px;
    text-decoration: none;
    border-bottom: 1px solid #cccccc;
}

.current {
    color: #00AEEF;
    background-color:#ffffff;
}

ul.leftmenu li {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
}

ul.leftmenu li:first-child {
    border-top: 1px solid #cccccc;
}

ul.leftmenu li:last-child {
    border-bottom: none;
}

ul.leftmenu li a:hover {
    background-color: #ffffff;
    color: #00aeef;
    transition: .35s ease-in-out;
}

p.leftmenu {
    font-size: 16px;
    font-weight: bold;
    margin-left: 25px;
    padding: 5px;       
}

我的html如下

<p class="leftmenu"><?php echo "Welcome <br />".$_SESSION['user_name'];?></p>
<ul class="leftmenu">
    <li <?php if($current == 'addproperty') {echo 'class="current"';} ?>><a href = "addproperty.php">Add Property</a><li>
    <li <?php if($current == 'manageproperties') {echo 'class="current"';} ?>><a href = "manageproperties.php?page=1">Manage Properties</a><li>
    <li <?php if($current == 'searchproperty') {echo 'class="current"';} ?>><a href = "searchproperty.php">Search Property</a><li>
    <li <?php if($current == 'savedsearch') {echo 'class="current"';} ?>><a href = "savedsearch.php?page=1">Saved Search</a><li>
    <li <?php if($current == 'favoriteproperties') {echo 'class="current"';} ?>><a href = "favoriteproperties.php?page=1">Favorite Properties</a><li>
    <li <?php if($current == 'invitefriends') {echo 'class="current"';} ?>><a href = "invitefriends.php">Invite Friends</a><li>
    <li <?php if($current == 'editprofile') {echo 'class="current"';} ?>><a href = "editprofile.php">Edit Profile</a><li>
</ul>

并在我定义的每个php页面上 $current = 'addproperty';(按页面更改)

现在的问题是.current能够改变背景颜色而不是颜色。

1 个答案:

答案 0 :(得分:2)

试试这个..

ul.leftmenu li.current a { 
    color: #00AEEF; 
    background-color:#ffffff; 
}