你的位置:首页 > Java教程

[Java教程]点击显示底框颜色,默认显示第一个。


页面初始化显示第一个底框颜色,点击另一个第一个底框颜色消失,被点击的底框颜色显示,以此循环。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> .box{width:800px;border:1px solid red;height:600px;margin:0 auto;} .zc{float:left;margin-right:50px;} ul {list-style:none;} a{text-decoration:none;} .box_nei{height:40px;line-height:40px;border-bottom:8px solid #E5E5E5;} .box_nei li a:hover{ font-size:18px; color:#666666 ; } .box_nei li a.hover{ font-size:18px; color:#666666 ; border-bottom:8px solid #C30D23;} .box_nei li a{ font-size:18px; color:#666666; width:124px; height:40px; line-height:40px; display:block;} .help_now{border-bottom:6px solid #C30D23;} </style>  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>  <script type="text/javascript">    $(function(){  $(".zc").click(function(){    $(this).addClass('help_now').siblings().removeClass("help_now");   });   $('#zcc').addClass('help_now'); }); </script> </head><!--要求默认显示一个红色底框;点击另一个这个消失另一个显现红色底框--> <body> <div class="box"> <div class="box_nei"> <ul>   <li class="zc" id="zcc">   <a id="zc" href="#"> 注册指南 </a>   </li>   <li class="zc" >  <a id="ass" href="#">新手必读</a>    </li>   <li class="zc" >  <a id="sf" href="#">收费标准</a>    </li>   <li class="zc" >  <a id="cj" href="#">常见问题 </a> </li> </ul> </div> <div> </body></html>

或者:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> .box{width:800px;border:1px solid red;height:600px;margin:0 auto;} .zc{float:left;margin-right:50px;} ul {list-style:none;} a{text-decoration:none;} .box_nei{height:40px;line-height:40px;border-bottom:8px solid #E5E5E5;} .box_nei li a:hover{ font-size:18px; color:#666666 ; } .box_nei li a.hover{ font-size:18px; color:#666666 ; border-bottom:8px solid #C30D23;} .box_nei li a{ font-size:18px; color:#666666; width:124px; height:40px; line-height:40px; display:block;} .help_now{border-bottom:6px solid #C30D23;} </style>  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>  <script type="text/javascript">  $(function(){  $(".zc").eq(0).addClass('help_now');  $(".zc").click(function(){      $(this).addClass('help_now').siblings().removeClass("help_now");   }); }); </script> </head><!--要求默认显示一个红色底框;点击另一个这个消失另一个显现红色底框--> <body> <div class="box"> <div class="box_nei"> <ul>   <li class="zc help_now">  <a id="zc" href="#"> 注册指南 </a>   </li>   <li class="zc" >         <a id="ass" href="#">新手必读</a>    </li>   <li class="zc" >         <a id="sf" href="#">收费标准</a>    </li>   <li class="zc" >         <a id="cj" href="#">常见问题 </a> </li> </ul> </div> <div> </body></html>