这篇博客介绍了如何利用jQuery和CSS创建选项卡功能，包括选中状态的样式切换和内容展示。通过示例代码展示了如何实现点击选项卡切换内容，并提供了实际的网页布局效果，如选项卡A、B、C和对应的内容一、内容二、内容三。此外，还探讨了前端开发中的DIV+CSS布局技巧，以及它们在SEO优化中的作用。
1.代码
body,div,ul{ padding:0; margin:0;}
#container{width:800px; margin:50px;}
.tab{ padding:0; margin:0; }
.tab li{ list-style:none; float:left;padding:0; margin-right:10px; line-height:30px; height:30px; width:65px; text-align:center;}
.content{ float:none; padding-top:30px; border:solid 1px black; clear:both; }
.content div{ border-top:0px; height:60px;}
.tab_selected{ border-left:solid 1px black; background-color:#ffffff; border-right:solid 1px black;
border-top:solid 1px black; border-bottom:0px; bottom:-1px; position:relative; z-index:1}
.tab_current{ text-decoration:underline;}
$(
function() {
$(".content div:gt(0)").hide();
$(".tab li").css("cursor", "pointer");
$(".tab li").hover(function() {
$(this).addClass("tab_current");
}, function() {
$(this).removeClass("tab_current");
}).click(
function() {
$(this).addClass("tab_selected").siblings().removeClass("tab_selected");
$(".content div").eq($(this).index()).siblings().hide().end().show();
}
)
}
);
- 选项卡A
- 选项卡B
- 选项卡C
2.效果图：
用DIV+Css+Jquery 实现的旧版微信飞机大战。
用jquery 实现的旧版微信飞机大战. 以前一直都是做后台和业务逻辑,前端很少去做, 现在个小游戏. 方向键控制方向,Ctrl 键 放炸弹(当然你的有炸弹,哈哈)! 主要都是用div+Css实现的, ...
div+css文字垂直居中 解决左侧头像右侧姓名，姓名多换行后相对于头像仍居中显示
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
div+css+jQuery图片横向滚动代码(带左右点击按钮)
首先感谢Blue老师的javascript教程,给了我很多的启发,这是我在看完10 - 定时器的使用 - 2这节视频后,自己试着用jQuery重新改写了一下代码,感觉至少比百度搜出来的那一坨靠谱多了, ...
div+css+jQuery简单实现投票功能
昨天看到C#群里有人问一个投票功能如何实现... 我对此很感兴趣,为了练习一下,就有了以下代码. 投票功能使用jQuery实现..纯html代码...数据通过json字符串传递,通过 eval转换为j ...
CSS+JQuery实现Tabs效果，点击更改背景色(不含图片)
1,Html代码
5146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
