[javascript] view plain copy
function show(id){
var d = $('#content'+id).css('display')
if(d == 'block'){
$('#content'+id).css('display','none')
$('#img'+id).attr('src','img/bottom.png')
}else if(d == 'none'){
$('.drop_down_content').each(function(){
$(this).css('display','none')
$('.drop_down_list img').attr('src','img/bottom.png')
})
$('#content'+id).css('display','block')
$('#img'+id).attr('src','img/top.png')
}
[html] view plain copy
<div class="drop_down_list" onclick="show('1')">
<a>svg</a>
<img id="img1" src="img/top.png"/>
</div>
<ul class="drop_down_content" id="content1" style="display:block">
<li>姓名 <a>李雷</a></li>
</ul>
<div class="drop_down_list" onclick="show('2')">
<a>动画</a>
<img id="img2" src="img/bottom.png"/>
</div>
<ul class="drop_down_content" id="content2" style="display:none">
<li>父亲 <a>李大宝</a></li>
</ul>
[css] view plain copy
ul{
list-style-type: none
-webkit-margin-before: 0px
-webkit-margin-after: 0px
-webkit-margin-start: 0px
-webkit-margin-end: 0px
-webkit-padding-start: 0px
-webkit-padding-after: 0px
}
.drop_down_list{
width:100%
height:44px
border-bottom: 1px solid #D9D9D9
}
.drop_down_list a{
display: inline-block
height:44px
width:100px
background: url(../img/biaozhu.png) 0px 13px no-repeat
background-size: 6px 20px
padding-left: 25px
padding-top: 12px
color: #0085d0
}
.drop_down_list img{
float: right
height:15px
margin: 15px 20px
}
.drop_down_content a{
color: #AAAAAA
display: inline-block
float: right
margin-right: 8%
}
.drop_down_content li{
height:38px
width:94%
color: #353535
margin-left: 3%
margin-right: 3%
padding-top: 15px
padding-left: 20px
border-bottom: 1px solid #D9D9D9
}
<html><head>
<title>鼠标划过表格行变色－简洁实现</title>
<style type="text/css">
#tb{width:666pxborder-collapse:collapseborder:1px solid #EEEfont-size:14px}
#tb th{background:#EEEborder-bottom:1px solid #CCCpadding:4px}
#tb td{border:1px solid #EEEpadding:4px}
</style>
</head>
<body>
<table id="tb">
<tr>
<th>商品名称</th>
<th>单价</th>
<th>库存数量</th>
<th>货位</th>
</tr>
<tr>
<td>丁学最喜欢的仙四豪华版-菱纱版</td>
<td>139</td>
<td>10000000</td>
<td>A12-253</td>
</tr>
<tr>
<td>仙四豪华版-梦璃版</td>
<td>139</td>
<td>10000000</td>
<td>A12-254</td>
</tr>
<tr>
<td>仙四普通版-首发</td>
<td>69</td>
<td>10000000</td>
<td>A12-255</td>
</tr>
</table>
<script type="text/javascript">
var obj=document.getElementById("tb")
for(var i=0i<obj.rows.lengthi++){
obj.rows[i].onmouseover=function(){this.style.background="#0EF"}
obj.rows[i].onmouseout=function(){this.style.background=""}
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）