css做的菜单，被选中状态的一个效果，很急，希望高手帮忙！！！

html-css020

css做的菜单，被选中状态的一个效果，很急，希望高手帮忙！！！,第1张

我这个只是实现你说的正在访问的文字有不同于其他文字的效果

用一个简单的js就可以

js里：

function xk(n){

for(var i=1i<=6i++){

var curB=document.getElementById("nav"+i)

if(n==i){

curB.className="active"

}else{

curB.className="none"

}

}

}

css里：加一个选中后的样式

.active{} /*he js里的curB.className="active"名称对应*/

菜单：

<ul>

<li onclick="return xk(1)" id="nav1" class="none"><a href="/">11111</a></li>

<li onclick="return xk(2)" id="nav2" class="none"><a href="/">22222</a></li>

<li onclick="return xk(3)" id="nav3" class="none"><a href="/">33333</a></li>

<li onclick="return xk(4)" id="nav4" class="none"><a href="/">44444</a></li>

<li onclick="return xk(5)" id="nav5" class="none"><a href="/">55555</a></li>

<li onclick="return xk(6)" id="nav6" class="none"><a href="/">66666</a></li>

</ul>

虽然代码可能有点麻烦 但是可以实现

用css写足矣，css中有focus这个神奇的东西，难道你没有用过吗，给你个例子吧

html:

<input type="text" placeholder="Enter Name." name="name" maxlength="300" class="input">

css:

.input {

border:0 

padding:10px 

font-size:1.3em 

font-family:"Ubuntu Light","Ubuntu","Ubuntu Mono","Segoe Print","Segoe UI"

color:#ccc 

border:solid 1px #ccc 

margin:0 0 20px 

width:300px

-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2) 

-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2) 

box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2)

-webkit-border-radius: 3px 

-moz-border-radius: 3px 

border-radius: 3px

}

input:focus { 

    outline: none !important

    border:1px solid red

    box-shadow: 0 0 10px #719ECE

}

$(".XXX").click(function(

$(".XXX").removeClass(".current")

$(this).addClass(".current")

))

一般这样就能解决问题了

先点击你选择的，所有的.XXX的class 取消.current（class），然后给当前的div添加.XXX（class）