足球游戏_中国足彩网¥体育资讯$

纯css实现的tab切换效果(使用锚点作为标记)
来源:易贤网 阅读:717 次 日期:2016-06-16 09:21:00
温馨提示:易贤网小编为您整理了“纯css实现的tab切换效果(使用锚点作为标记)”,方便广大网友查阅!

其实是使用锚点作为标记,通过点击实现了切换。css代码

代码如下:

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-color:#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{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; padding-top:10px; width:218px; height:190px;}

.tabdiv ul li{ height:24px;color:#666666; font-size:12px; margin-left:20px; }

.tabdiv ul li a{ color:#333333; margin-left:5px;}

复制代码代码如下:

</pre>html代码<pre name=code class=css><body>

<!--tab-->

<ul class=tab_ul>

<li><a href=#ul1>目录1</a></li>

<li><a href=#ul2>目录2</a></li>

<li><a href=#ul3>目录3</a></li>

<li><a href=#ul4>目录4</a></li>

</ul>

<div class=tabdiv>

<ul id=ul1>

<li><a href=# >java</a></li>

<li><a href=# >c++</a></li>

<li><a href=# >c#</a></li>

<li><a href=# >php</a></li>

<li><a href=# >javascript</a></li>

<li><a href=# >css</a></li>

<li><a href=# >html</a></li>

</ul>

<ul id=ul2>

<li><a href=# >语文</a></li>

<li><a href=# >数学</a></li>

<li><a href=# >英语</a></li>

<li><a href=# >历史</a></li>

<li><a href=# >地理</a></li>

<li><a href=# >生物</a></li>

<li><a href=# >化学</a></li>

</ul>

<ul id=ul3>

<li><a href=# >红色</a></li>

<li><a href=# >黄色</a></li>

<li><a href=# >橙色</a></li>

<li><a href=# >绿色</a></li>

<li><a href=# >紫色</a></li>

<li><a href=# >蓝色</a></li>

<li><a href=# >黑色</a></li>

</ul>

<ul id=ul4>

<li><a href=# >运营</a></li>

<li><a href=# >设计</a></li>

<li><a href=# >产品</a></li>

<li><a href=# >程序</a></li>

<li><a href=# >美工</a></li>

<li><a href=# >交互</a></li>

<li><a href=# >经理</a></li>

</ul>

</div>

<!--tab结束-->

</body>

中国足彩网信息请查看网页制作
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标