6个回答
展开全部
div+css只是页面的样式控制，他没有切换的显示功能，只有通过其他语言来控制的，如果没有js的控制是无法达到预期的效果的
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不能!
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
看你怎么用了， 可以用 CSS的 hover属性 改变参数 display的值，进行层的显示与隐藏
如果负责的功能 还是要用JS 脚本去写
如果负责的功能 还是要用JS 脚本去写
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个的话 如果不考虑 浏览器兼容 是可以实现
一般的话 兼容是第一位的 不能已达到目地 而放弃兼容
一般的话 兼容是第一位的 不能已达到目地 而放弃兼容
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不考虑IE6的话,就能
因为IE6只能识别A标签上的hover属性,但其实hover可以加到任意元素上,从而制作tab选项卡效果
因为IE6只能识别A标签上的hover属性,但其实hover可以加到任意元素上,从而制作tab选项卡效果
追问
能不能提供具体的代码呢？谢谢！！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用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>
<!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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
