关于div+css选项卡问题

发布网友发布时间：2023-01-25 13:22

我来回答

共6个回答

热心网友时间：2023-01-25 14:52

div+css只是页面的样式控制，他没有切换的显示功能，只有通过其他语言来控制的，如果没有js的控制是无法达到预期的效果的

热心网友时间：2023-01-25 16:10

不能!

热心网友时间：2023-01-25 17:44

看你怎么用了，可以用 CSS的 hover属性改变参数 display的值，进行层的显示与隐藏
如果负责的功能还是要用JS 脚本去写

热心网友时间：2023-01-25 19:36

这个的话如果不考虑浏览器兼容是可以实现
一般的话兼容是第一位的不能已达到目地而放弃兼容

热心网友时间：2023-01-25 21:44

不考虑IE6的话,就能

因为IE6只能识别A标签上的hover属性,但其实hover可以加到任意元素上,从而制作tab选项卡效果追问能不能提供具体的代码呢？谢谢！！

热心网友时间：2023-01-26 00:08

用jquery的话，2行js就能搞定

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>qh</title>
<script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tab_title ul li").mouseover(function(){
$(this).addClass("cc").siblings().removeClass();
$("."+$(this).attr("id")).show().siblings().hide();
});
})
</script>
<style type="text/css">
*{margin:0;padding:0;border:0}
ul{list-style:none;}
body{margin:10px auto;font-size:12px;}
.tab{width:323px;height:200px;border:1px #d8d8d8 solid;margin:0 auto}
.tab_title{width:100%;float:left;background:#f6f6f6;font-weight:bolder;color:#666}
.tab_title ul{width:100%;float:left;border-bottom:1px #d8d8d8 solid}
.tab_title ul li{width:80px;height:30px;float:left;display:block;cursor:pointer;text-align:center;line-height:30px;border-right:1px #d8d8d8 solid}
#i4{border-right:none}
.cc{width:80px;height:30px;float:left;display:block;border-bottom:0;color:#3e3e3e;background:#fff}
</style>
</head>

<body>
<div class="tab">
<div class="tab_title">
<ul>
<li id="i1" class="cc">手机充值</li>
<li id="i2">游戏快充</li>
<li id="i3">淘宝旅行</li>
<li id="i4">淘宝</li>
</ul>
</div>
<div class="tab_cont">
<ul>
<li class="i1"><a id="q1">手机充值</a></li>
<li class="i2" style="display:none"><a id="q2">游戏快充</a></li>
<li class="i3" style="display:none"><a id="q3">淘宝旅行</a></li>
<li class="i4" style="display:none"><a id="q4">淘宝</a></li>
</ul>
</div>
</div>
</body>
</html>