文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

css中怎么实现tab切换效果

2024-04-02 19:55

关注

今天就跟大家聊聊有关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>

看完上述内容,你们对css中怎么实现tab切换效果有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注编程网行业资讯频道,感谢大家的支持。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯