选项卡通过jQuery实现
来源：互联网 发布：java后台开发框架源码 编辑：程序博客网 时间：2024/04/28 03:11
<html>
<meta charset="utf-8">
<head>
<style>
*{margin:0;padding:0}
.select_muto{margin:auto;width:200px;}
.select_list ul li{list-style:none;float:left;border:1px solid #ccc;width:50px;text-align:center;margin-left:10px;line-height:20px;border-bottom:none;cursor:pointer;}
.select_con{clear:both;border:1px solid #ccc;width:200px;height:200px;margin-left:10px;}
.con{display:none;}
.list{background:#aaa;}
.st{background:#a90}
</style>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(".select_list ul li").click(function(){
var $index=$(this).index();
$(".select_con div").eq($index).show().siblings().hide();
$(this).addClass("list").siblings().removeClass("list");
}).hover(function(){
$(this).addClass("st").siblings().removeClass("st");
},function(){
$(this).removeClass("st");
});
})
</script>
</head>
<body>
<div class="select_muto">
<div class="select_list">
<ul>
<li class="list">事件</li>
<li>新闻</li>
<li>体育</li>
</ul>
</div>
<div class="select_con">
<div>事件</div>
<div class="con">新闻</div>
<div class="con">体育</div>
</div>
</div>
</body>
</html>
<meta charset="utf-8">
<head>
<style>
*{margin:0;padding:0}
.select_muto{margin:auto;width:200px;}
.select_list ul li{list-style:none;float:left;border:1px solid #ccc;width:50px;text-align:center;margin-left:10px;line-height:20px;border-bottom:none;cursor:pointer;}
.select_con{clear:both;border:1px solid #ccc;width:200px;height:200px;margin-left:10px;}
.con{display:none;}
.list{background:#aaa;}
.st{background:#a90}
</style>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(".select_list ul li").click(function(){
var $index=$(this).index();
$(".select_con div").eq($index).show().siblings().hide();
$(this).addClass("list").siblings().removeClass("list");
}).hover(function(){
$(this).addClass("st").siblings().removeClass("st");
},function(){
$(this).removeClass("st");
});
})
</script>
</head>
<body>
<div class="select_muto">
<div class="select_list">
<ul>
<li class="list">事件</li>
<li>新闻</li>
<li>体育</li>
</ul>
</div>
<div class="select_con">
<div>事件</div>
<div class="con">新闻</div>
<div class="con">体育</div>
</div>
</div>
</body>
</html>
- 选项卡通过jQuery实现
- IE 8 中选项卡通过颜色分组
- jQuery实现选项卡
- jquery实现 选项卡
- jquery 实现选项卡
- jquery实现选项卡
- 选项卡jQuery实现
- jquery实现选项卡
- jquery实现选项卡
- CE5.0上实现了CF卡通过Hive-based registry断电保存注册表
- opengles实现卡通效果
- jquery实现新闻菜单选项
- 利用jQuery实现->选项卡
- Jquery实现选项卡tabs
- jQuery实现网页选项卡
- Jquery实现选项卡功能
- Jquery实现选项卡功能
- jQuery实现简单选项卡
- Mangos源码分析（6）：登录服的设计之功能需求
- vs2008 创建打包安装程序
- 信号和槽
- 数据结构课程设计一元稀疏多项式计算器
- Mangos源码分析（7）：服务器公共组件实现之游戏主循环
- 选项卡通过jQuery实现
- Mangos源码分析（8）：服务器公共组件实现之消息队列
- OProfile安装和使用
- 数据结构课程设计--哈夫曼树编
- Mangos源码分析（9）：服务器公共组件实现之环形缓冲区
- Java程序员面试中的多线程问题
- Mangos源码分析（10）：服务器公共组件实现之发包的方式
- jQuery实现复选框的全选 反选 全不选
- jquery的表单验证你会了吗？
