用纯css编写一个tab标签实现的功能是先是横向的标签内容1，内容2，点开内容1显示纵向的tab标
用纯css编写一个tab标签实现的功能是先是横向的标签内容1，内容2，点开内容1显示纵向的tab标签内容3，内容4，我指的不是二级导航，指的是点击内容1下边对应一个内容1...
用纯css编写一个tab标签实现的功能是先是横向的标签内容1，内容2，点开内容1显示纵向的tab标签内容3，内容4，我指的不是二级导航，指的是点击内容1下边对应一个内容1的div的内容，点击内容2对应内容2的div内容，点击内容3对应内容3的div内容，点击内容4的对应内容4的内容。
我要的效果大体就是这个样子，希望有具体的代码，和批注，我是新手，不太懂，但是就是想用纯css实现。 展开
我要的效果大体就是这个样子，希望有具体的代码，和批注，我是新手，不太懂，但是就是想用纯css实现。 展开
展开全部
一开始我也以为纯用css做点击是做不到，搜了下资料，看到了一个demo，主要逻辑就是通过锚点进行定位，在指定区域显示不同的模块。
<!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=utf-8" />
<title>纯CSS实现tab选项卡</title>
<style>
body,div,ul,li{margin:0; padding:0; font-size:12px;}
.clearFloat{ clear:both; height:0; line-height:0; font-size:0;}
.tab_ul{ margin:10px auto 0; padding-left:20px; width:228px; height:31px; background:url(/uploads/allimg/100309/1_100309143554_1.gif) left bottom repeat-x #FCEDFF;border:1px solid #DBA4E8; border-bottom:0;}
.tab_ul li{ float:left; display:inline; margin:5px 0 0 5px; width:46px; height:26px;}
.tab_ul li a{ display:block;width:46px; height:26px; line-height:26px; text-align:center;font-size:12px; color:#000000; text-decoration:none;}
.tab_ul li a:hover{ background-image:url(/uploads/allimg/100309/1_100309143512_1.gif); color:#5F0082; font-weight:bold;}
.tabDiv{ margin:0 auto; width:248px; height:200px;border:1px solid #DBA4E8; border-top:0; overflow:hidden;}
.tabDiv ul{ margin:0 auto 0; padding-top:10px; width:218px; height:190px;}
.tabDiv ul li{ height:24px; text-align:right; color:#666666; font-size:12px;}
.tabDiv ul li a{ float:left; color:#333333;}
</style>
</head>
<body>
<!--tab-->
<ul class="tab_ul">
<li><a href="#ul1">美食</a></li>
<li><a href="#ul2">娱乐</a></li>
<li><a href="#ul3">购物</a></li>
<li><a href="#ul4">住宿</a></li>
</ul>
<div class="tabDiv">
<ul id="ul1">
<li><a href="#" _fcksavedurl="#">·国际饭店星光旋转餐厅1</a>0.1公里</li>
</ul>
<ul id="ul2">
<li><a href="#" _fcksavedurl="#">·更多刮大风长安店)2</a>0.2公里</li>
</ul>
<ul id="ul3">
<li><a href="#" _fcksavedurl="#">·渝信发是店)3</a>0.3公里</li>
</ul>
<ul id="ul4">
<li><a href="#" _fcksavedurl="#">·国际饭防盗锁旋转餐厅4</a>0.4公里</li>
</ul>
</div>
<!--tab结束-->
</body>
</html>
追问
你好，能加你吗？这个代码，我有一些不太明白，能私聊吗？谢谢！非常感谢！
追答
你的QQ号是？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
