<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script><style type="text/css">*{ font-family: 微软雅黑; font-size: 14px; }.tab{ height:38px; list-style-type:none; margin:0px; padding:0px;}.tab>li{ height:32px; line-height: 32px; text-align: center; padding: 0px 12px; float: left; border-radius:10px; border:1px solid #B5B5B5; margin-right:5px; cursor: pointer;}.tab>li:hover{ //这个不明白，求解释 border:none; background: red; color:#fff;} .in { //这个不明白，求解释 .in是什么意思 border:none; background: #3399CC; color:#fff; } .tab-body{ width:100%; } .tab-body>div{ border:1px solid #B5B5B5; width:100%; padding: 10px; display: none; }</style><script type="text/javascript"> function showDiv(id,self){ $('.tab-head>li').removeClass('in'); $(self).addClass('in'); $('.tab-body>div').hide(); $('#'+id).slideDown(500); } </script></head><body><ul class="tab"> <li onclick="showDiv('d1',this)">单人间</li> <li onclick="showDiv('d2',this)">双人间</li> <li onclick="showDiv('d3',this)">三人间</li></ul><div class="tab-body"> <div id="d1">你好</div><div id="d2">欢迎您的到来</div><div id="d3">天下</div></div> </body></html>
添加回答
举报
0/150
提交
取消