js如何实现导航栏鼠标点击选中后的效果

JavaScript015

js如何实现导航栏鼠标点击选中后的效果,第1张

不懂这儿的选中是鼠标点击还是覆盖或者是点击之后的效果,因此就都说一下: 1.被点击时的效果可以用div:active{ css } 2.鼠标覆盖在上面的时候可以用div：hover{ css} 3.点击之后的效果，这个相对前2种有些麻烦，必须用到JS或者jquery，步骤如下： a.先给div添加一个选中的样式比如on{css}； b.然后在js中$('div').click(function{ $('div').toggleClass(' ','on')}) 这是jquery自带的一个方法，点击div切换2个class,

<script type="text/javascript">

arr = new Array()

function selTD(obj)

{

for(var i in arr)

{

if(obj.innerHTML==arr[i])

{

alert("已经被选过了！")

return

}

}

alert("选中一个")

arr.push(obj.innerHTML)

}

function showSel(){

for(var i in arr)

{

alert("arr["+i+"]="+arr[i])

}

}

</script>

<table id=t1 border="1" width="90%">

<tr>

<td id=td11 colspan="3" align="center">8ʱ</td>

<td id=td11 colspan="3" align="center">9ʱ</td>

</tr>

<tr>

<td id=td81 onclick="selTD(this)" height="50">时间1</td>

<td id=td82 onclick="selTD(this)">时间2</td>

<td id=td83 onclick="selTD(this)">时间3</td>

<td id=td91 onclick="selTD(this)" height="50">时间4</td>

<td id=td92 onclick="selTD(this)">时间5</td>

<td id=td93 onclick="selTD(this)">时间6</td>

</tr>

</table>

<button onclick="showSel()">查看已选中的</button>