<!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>

tab------左右布局的更多相关文章

  1. vue tab切换布局

    页面 功能 点击tab1和tab2,content内容切换content1和content2 <template> <div> <div class="tab& ...

  2. 使用FragmentTabHost+TabLayout+ViewPager实现双层嵌套Tab

    大多数应用程序都会在底部使用3~5个Tab对应用程序的主要功能进行划分,对于一些信息量非常大的应用程序,还需要在每个Tab下继续划分子Tab对信息进行分类显示. 本文实现采用FragmentTabHo ...

  3. Android学习笔记（九） 视图的应用布局效果

    最近少了写博客,可能最近忙吧,工作上忙,因为工作原因也忙于学习,也没记录什么了,也没有按照之前的计划去学习了.现在就记录一下最近学到的. 要做Android应用,界面设计少不了,可惜之前一直在用Win ...

  4. Android tab导航的几种方法:ActionBar tab +fragment,Viewpager+pagerTitleStrip,开源框架ViewPageIndicator 和 ViewPager

    action来实现tab标签 并跟fragment结合 因为要写新闻客户端这个tab导航是必须的 这里我写几个小练习,希望大家融会贯通. 1actionbar设置tab +fragment 布局是个l ...

  5. Android 常用UI控件之TabHost(1)TabHost的两种布局方式

    TabHost是Android中的tab组件. TabHost布局文件的基本结构 TabHost下有个layout,这个layout中有TabWidget与FrameLayout.TabWidget是 ...

  6. 谈谈android 布局 的优化

    来自:http://www.cnblogs.com/youxilua/archive/2012/05/08/2489414.html 导言 设配android的屏幕一定是一个噩梦,就好比那些搞网页设计 ...

  7. ViewPager+View实现Tab

    注:源码来自慕课网. 使用ViewPager+View实现Tab底部导航: 主要思想:顶部top.xml,中间ViewPager,底部线性布局Tab导航. top.xml具体实现: <?xml ...

  8. Android实战简易教程-第三十四枪（基于ViewPager和FragmentPagerAdapter实现滑动通用Tab）

    上一段时间写过一篇文章<基于ViewPager实现微信页面切换效果> 里面实现了相似微信Tab的页面.可是这样的实现方法有个问题.就是以后全部的代码逻辑都必须在MainActivity中实 ...

  9. 三种实现Android主界面Tab的方式

    在平时的Android开发中,我们经常会使用Tab来进行主界面的布局.由于手机屏幕尺寸的限制,合理使用Tab可以极大的利用屏幕资源,给用户带来良好的体验.学会Tab的使用方法已经成为学习Android ...

  10. Android典型界面设计(6)——ActionBar Tab+ViewPager+Fagment实现滑动导航

    一.问题描述 在Android典型界面设计一文中,实现典型滑动导航界面,其实使用ActionBar 也可以轻松实现这一效果,甚至也可实现类似Android典型界面设计(3)的双导航效果.可见Actio ...

随机推荐

  1. Linux命令：pigz多线程压缩工具【转】

    学习Linux系统时都会学习这么几个压缩工具:gzip.bzip2.zip.xz,以及相关的解压工具.关于这几个工具的使用和相互之间的压缩比以及压缩时间对比可以看:Linux中归档压缩工具学习 那么P ...

  2. oracle的读写分离实现

    在MySQL作为应用系统的后台数据库时,我们常常见到这样的架构,一拖二.一拖三等等.这是用MySQL的读写分离技术,实现数据的写入和读取分别在不同的库上,提升了数据库服务能力. 同样,在Oracle作 ...

  3. SharePoint 2010管理中心服务器提示“需要升级”

    共3台服务器,只有管理中心所在服务器提示需要升级: 执行命令:stsadm –o localupgradestatus,返回结果类似如下: [2] content database(s) encoun ...

  4. hostapd 和 wap_supplicant

    hostapd : user space daemon for access points, including, e.g., IEEE 802.1X/WPA/EAP Authenticator fo ...

  5. 转载：Java的四种引用方式

    原文:https://www.cnblogs.com/huajiezh/p/5835618.html Java内存管理分为内存分配和内存回收,都不需要程序员负责,垃圾回收的机制主要是看对象是否有引用指 ...

  6. rsync使用详解

    1.什么是Rsync Rsync(remote synchronize)是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件.Rsync使用所谓的“Rsync算法”来使本地和远 程两个 ...

  7. Android Studio 超级简单的打包生成apk

    为什么要打包: apk文件就是一个包,打包就是要生成apk文件,有了apk别人才能安装使用.打包分debug版和release包,通常所说的打包指生成release版的apk,release版的apk ...

  8. robots.txt、humans.txt、.editorconfig、.gitignore、LICENSE.txt、README.md、CHANGLOG.md

    robots.txt搜索引擎查看的时候会查看这个文件,告诉搜索引擎哪些文件可以查看,哪些文件不能查看 当搜索引擎搜索网站的时候,会看有这个文件没,如果有,会通过里面的文件来确定哪些文件能看,哪些文件不 ...

  9. STM32应用实例六：与MS5837压力传感器的I2C通讯

    MS5837压力传感器是一种可用于电路板上,适用于检测10-1200mbar压力范围的传感器,灵敏度非常高,理论上能够检测到0.01mbar的压力变化,实际使用过程中测试并无明显的变化. MS5837 ...

  10. win10下vscode配置sftp

    sftp配置 1.在vscode中下载sftp插件 在vscode中快捷键 ctrl+shift+P 打开指令窗口,输入extension:install,回车,左侧即打开扩展安装的界面  在搜索框中 ...