面向对象和面向过程的jquery版选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.cart{
margin: 0 auto;
}
ul li {
list-style: none;
float:left;
}
ul{
width:30%;
height: 60px;
background-color: #000000;
}
ul li {
text-decoration: none;
line-height: 60px;
cursor: pointer;
color:#FFFFFF;
}
/*ul li:first-child{
background-color: #ff0000;
}*/
.neirong{
width: 30%;
height: 150px;
background-color: #ccc;
overflow: hidden;
}
p{
display: none;
}
p:first-child{
display: block;
}
</style>
<body>
<div class="cart1">
<ul class="ulbox">
<li>选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class="neirong">
<p>一，就可以避免数据在浏览器和服务器间不必要地来回orage对象也是不同的cookies会发送到服务器端。不服来战</p>
<p>二，其余两个不会。Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。，，不服来战</p>
<p>三，sessionStorage和localStorage是HTML5 Web Storage API提供的，可以方便的在web请求之间保存数据。有了本地数据，，不服来战</p>
</div>
</div>
<div class="cart2">
<ul class="ulbox">
<li>选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class="neirong">
<p>一，就可以避免数据在浏览器和服务器间不必要地来回orage对象也是不同的cookies会发送到服务器端。不服来战</p>
<p>二，其余两个不会。Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。，，不服来战</p>
<p>三，sessionStorage和localStorage是HTML5 Web Storage API提供的，可以方便的在web请求之间保存数据。有了本地数据，，不服来战</p>
</div>
</div>
<script type="text/javascript">
//方法一
// $(document).ready(function(){
// $('.ulbox li').eq(0).css({"background":"#ff0000"});
// $(".ulbox li").mouseenter(function(){
// $(this).css({"backgroundColor":"#ff0000"}).siblings().css({"backgroundColor":"#000000"});
// $("p").eq($(this).index()).show().siblings().hide();
// });
// });
//方法二
// $('li').eq(0).css({"background":"#ccc"});
// $("li").mouseenter(function(){
// $(this).css({"background":"#ccc"});
// $("li").not($(this)).css({"background":"#000"})
// idx=$(this).index();
//
// $("p").eq(idx).show();
// $("p").not($("p").eq(idx)).hide();
// })
//方法三，以插件形式封装，可在同个页面中重复使用，实现封装性，有利于网站管理和维护
(function($){
$.fn.tabs=function(opt){
var defaults={
'autoclick':'mouseenter'
}
$.extend(defaults,opt);
return this.each(function(){
var me=$(this);
var libox=me.find('.ulbox li');
libox.eq(0).css({"background":"#ff0000"});
libox.on(defaults.autoclick,show);
function show(){
var li=$(this);
li.css({"backgroundColor":"#ff0000"}).siblings().css({"backgroundColor":"#000000"});
me.find(".neirong p").eq($(this).index()).show().siblings().hide();
}
})
}
})(jQuery);
$(function(){
$('.cart1').tabs({
'autoclick':'mouseover'
});
})
$(function(){
$('.cart2').tabs({
'autoclick':'click'
});
})
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南