tab------左右布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 880px;height: 480px;border: 1px solid #ddd;margin: 100px auto;}
#box .list{width: 180px;border-right:1px solid #ddd ;height: 480px;float: left;}
#box .list li{height: 45px;border-bottom:1px solid #ddd ;list-style: none;line-height: 45px;font-size: 16px;text-align: center;}
#box .con{width: 698px;height: 400px;background: #ccc;float: left;overflow: hidden;}
#box .on{background: #ccc;}
#box .con div{
width: 695px;height: 480px;font-size: 14px;text-align: center;
}
#box .con div:nth-child(1){
background: palegreen;
}
#box .con div:nth-child(2){
background:orange;
}
#box .con div:nth-child(3){
background:palevioletred;
}
#box .con div:nth-child(4){
background:blueviolet;
}
#box .con div:nth-child(5){
background:brown ;
}
</style>
</head>
<body>
<div id="box">
<div class="list">
<ul>
<li class="on">哈哈</li>
<li>嘻嘻</li>
<li>喵喵</li>
<li>某某</li>
<li>喳喳</li>
</ul>
</div>
<div class="con">
<div>哈哈啊哈哈</div>
<div>嘻嘻嘻嘻嘻嘻嘻</div>
<div>喵喵密密麻麻</div>
<div>某某某某某某</div>
<div>扎扎扎扎咋呼咋哈</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.1.0.min.js" ></script>
<script type="text/javascript">
$(function(){
var $li = $(".list li");
var $conDiv = $(".con div");
$li.mouseover(function(){
var $index = $(this).index();
$(this).addClass("on").siblings().removeClass("on");
$conDiv.eq($index).show().siblings().hide();
});
})
</script>
</body>
</html>
最新文章
- linux编程问题记录
- Web打印控件
- 【python cookbook】【数据结构与算法】11.对切片命名
- android 介绍0
- 《dive into python3》 笔记摘录
- DoingOrder.aspx.cs缓存的使用方法
- Windows 服务多语言化时读取配置文件失败的问题。
- GitHub开源:SQLite 增强组件 Sheng.SQLite.Plus
- js之制作网页计时器
- (原创)超详细一步一步在eclipse中配置Struts2环境,无基础也能看懂
- SQL Server同一表不同列数据同步
- C#子类重写父类函数的两种方法
- pyqt5-对文本样式进行操作
- Flask学习【第11篇】:整合Flask中的一些知识点
- Cache雪崩效应
- 查看PHP代码执行的时间
- Linux内核分析 NO.3
- git安装与初始化
- AI单挑Dota 2世界冠军:被电脑虐哭……
- iOS 管理库 Carthage 安装以及使用
热门文章
- Linux命令:pigz多线程压缩工具【转】
- python创建系统用户和用户组
- 【转】C++的const类成员函数
- 深入解析内存原理:DRAM的基本原理
- zabbix3.0对tcp连接数和状态的监控优化
- Android JAR包、Library项目
- 造轮子和用轮子:快速入门JavaScript模块化
- python 全栈开发,Day127(app端内容播放,web端的玩具,app通过websocket远程遥控玩具播放内容,玩具管理页面)
- Redis 5.0 集群搭建
- SG 大法(Sprague-Grundy函数)