列表项标题更改背景颜色onClick

时间：2017-04-21 22:27:22

标签： html css

如何更改标题列表项颜色onClick？默认情况下，主项目背景颜色为绿色。当我点击联系人项目或任何其他项目时，它应该得到背景颜色绿色和家庭项目不应该有绿色背景！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="art-main">
        <header class="art-header">
            <nav class="art-nav">
                <ul class="art-hmenu">
                    <li><a href="#" class="active">Home</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </nav>        
        </header>
    </div>
</body>
</html>


.art-header
{
   margin:0 auto;
   height: 100px;
   background-position: 19px 6px, 0 0;
   position: relative;
   width: 900px;
   z-index: auto !important;
}

.art-nav
{
   padding:5px 2px;
   position: absolute;
   margin: 0;
   top:     20px;
   width: 100%;
   z-index: 100;
   text-align: right;
}


ul.art-hmenu li
{
   position: relative;
   z-index: 5;
   display: block;
   float: left;
   background: none;
   margin: 0;
   padding: 0;
   border: 0;
}

ul.art-hmenu 
{
   display: inline-block;
   vertical-align: middle;
}

ul.art-hmenu>li {
   margin-left: 2px;
}
ul.art-hmenu>li:first-child {
   margin-left: 1px;
}
ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child {
   margin-right: 1px;
}

ul.art-hmenu>li>a
{
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
   border-radius:5px;
   border:1px solid transparent;
   padding:0 22px;
   margin:0 auto;
   position: relative;
   display: block;
   height: 51px;
   cursor: pointer;
   text-decoration: none;
   color: #808080;
   line-height: 51px;
   text-align: center;
}

.art-hmenu>li>a, 
.art-hmenu>li>a:link, 
.art-hmenu>li>a:visited, 
.art-hmenu>li>a.active, 
.art-hmenu>li>a:hover
{
   font-size: 14px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: bold;
   font-style: normal;
   text-decoration: none;
   text-transform: uppercase;
   text-align: left;
}

ul.art-hmenu>li>a.active
{
   background: #73B078;
   background: -webkit-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
   background: -moz-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
   background: -o-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
   background: -ms-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
   -svg-background: linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
   background: linear-gradient(to bottom, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
   border-radius:5px;
   border:1px solid #57995C;
   padding:0 22px;
   margin:0 auto;
   color: #FFFFFF;
   text-decoration: none;
}

ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
   background: #ADAF88;
   background: -webkit-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
   background: -moz-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
   background: -o-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
   background: -ms-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
   -svg-background: linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
   background: linear-gradient(to bottom, #C2C3A7 0, #969867 100%) no-repeat;
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
   border-radius:5px;
   border:1px solid #ADAF88;
   padding:0 22px;
   margin:0 auto;
}
ul.art-hmenu>li>a:hover, 
.desktop ul.art-hmenu>li:hover>a {
   color: #FFFFFF;
   text-decoration: none;
}

1 个答案:

答案 0 :(得分：0)

使用jquery

＆＃13;
＆＃13; 
$('ul li a').click(function(){

    if ($('ul li a').hasClass("active")){
          $('ul li a').removeClass("active");
          }
  
     $(this).addClass("active");
    
 });
＆＃13; 
.art-header
{
   margin:0 auto;
   height: 100px;
   background-position: 19px 6px, 0 0;
   position: relative;
   width: 100%;
   z-index: auto !important;
}

.art-nav
{
   padding:5px 2px;
   position: absolute;
   margin: 0;
   top:     20px;
   width: 100%;
   z-index: 100;
   text-align: right;
}


ul.art-hmenu li
{
   position: relative;
   z-index: 5;
   display: block;
   float: left;
   background: none;
   margin: 0;
   padding: 0;
   border: 0;
}

ul.art-hmenu 
{
   display: inline-block;
   vertical-align: middle;
}

ul.art-hmenu>li {
   margin-left: 2px;
}
ul.art-hmenu>li:first-child {
   margin-left: 1px;
}
ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child {
   margin-right: 1px;
}

ul.art-hmenu>li>a
{
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
   border-radius:5px;
   border:1px solid transparent;
   padding:0 22px;
   margin:0 auto;
   position: relative;
   display: block;
   height: 51px;
   cursor: pointer;
   text-decoration: none;
   color: #808080;
   line-height: 51px;
   text-align: center;
}

.art-hmenu>li>a, 
.art-hmenu>li>a:link, 
.art-hmenu>li>a:visited, 
.art-hmenu>li>a.active, 
.art-hmenu>li>a:hover
{
   font-size: 14px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: bold;
   font-style: normal;
   text-decoration: none;
   text-transform: uppercase;
   text-align: left;
}

ul.art-hmenu>li>a.active
{
   background: #73B078;
   background: -webkit-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
   background: -moz-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
   background: -o-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
   background: -ms-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
   -svg-background: linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
   background: linear-gradient(to bottom, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
   border-radius:5px;
   border:1px solid #57995C;
   padding:0 22px;
   margin:0 auto;
   color: #FFFFFF;
   text-decoration: none;
}

ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
   background: #ADAF88;
   background: -webkit-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
   background: -moz-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
   background: -o-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
   background: -ms-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
   -svg-background: linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
   background: linear-gradient(to bottom, #C2C3A7 0, #969867 100%) no-repeat;
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
   border-radius:5px;
   border:1px solid #ADAF88;
   padding:0 22px;
   margin:0 auto;
}
ul.art-hmenu>li>a:hover, 
.desktop ul.art-hmenu>li:hover>a {
   color: #FFFFFF;
   text-decoration: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="art-main">
        <header class="art-header">
            <nav class="art-nav">
                <ul class="art-hmenu">
                    <li><a class="active">Home</a></li>
                    <li><a>Contact Us</a></li>
                    <li><a>About</a></li>
                </ul>
            </nav>        
        </header>
    </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题