点击显示底框颜色，默认显示第一个。
生活随笔
收集整理的這篇文章主要介紹了
点击显示底框颜色，默认显示第一个。
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
頁(yè)面初始化顯示第一個(gè)底框顏色，點(diǎn)擊另一個(gè)第一個(gè)底框顏色消失，被點(diǎn)擊的底框顏色顯示，以此循環(huán)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="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> <!--要求默認(rèn)顯示一個(gè)紅色底框；點(diǎn)擊另一個(gè)這個(gè)消失另一個(gè)顯現(xiàn)紅色底框--><body><div class="box"><div class="box_nei"><ul><li class="zc" id="zcc"> <a id="zc" href="#"> 注冊(cè)指南 </a> </li><li class="zc" > <a id="ass" href="#">新手必讀</a> </li><li class="zc" > <a id="sf" href="#">收費(fèi)標(biāo)準(zhǔn)</a> </li><li class="zc" > <a id="cj" href="#">常見(jiàn)問(wèn)題 </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 xmlns="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> <!--要求默認(rèn)顯示一個(gè)紅色底框；點(diǎn)擊另一個(gè)這個(gè)消失另一個(gè)顯現(xiàn)紅色底框--><body><div class="box"><div class="box_nei"><ul><li class="zc help_now"> <a id="zc" href="#"> 注冊(cè)指南 </a> </li><li class="zc" > <a id="ass" href="#">新手必讀</a> </li><li class="zc" > <a id="sf" href="#">收費(fèi)標(biāo)準(zhǔn)</a> </li><li class="zc" > <a id="cj" href="#">常見(jiàn)問(wèn)題 </a> </li></ul></div><div></body> </html>?
更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的点击显示底框颜色，默认显示第一个。的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： jquery层级原则器（匹配后代元素di
- 下一篇： Angularjs总结（五）指令运用及常