超简单TAB切换
<div class="tab-fbox2">
<ul class="title-list2 clearfix">
<li class="active2">第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第三个</li>
</ul>
<div class="tcont-box2">
<div class="tcont2" style="display:block;">第一个的内容</div>
<div class="tcont2">第二个的内容</div>
<div class="tcont2">第三个的内容</div>
<div class="tcont2">第三个的内容</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$('.tab-fbox2').on('mouseover', '.title-list2 li', function(e){
var index = $(this).index();
$(this).addClass('active2').siblings().removeClass('active2');
$(e.delegateTarget).find('.tcont2').eq(index).show().siblings().hide();
}); });
</script>
style样式
.tab-fbox2{ width:500px; margin:20px 0 0 50px;}
.tab-fbox2 .title-list2 li{ float:left; width:100px; height:20px; text-align:center; line-height:20px; background-color:#000; color:#fff; border-right:solid 2px #fff; cursor:pointer;}
.tab-fbox2 .title-list2 li.active2{ background-color:#f00;}
.tab-fbox2 .tcont-box2{ border:solid 1px #000; height:300px;}
.tab-fbox2 .tcont-box2 .tcont2{ display:none;}
超简单TAB切换的更多相关文章
- 简单Tab切换
延迟Tab切换,使用css中的flex布局,原生js实现.(京东首页菜单也有此延迟功能哦!) 每天进步一丢丢~~ 1.延迟Tab切换 <!DOCTYPE html> <html la ...
- jquery实现简单的Tab切换菜单
实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...
- jquery写的tab切换效果 非常简单
自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...
- 简单的Tab切换组件
由于代码都有注释,所以不多加解释,大家都知道的.直接贴代码: 代码如下: /** * 简单的Tab切换 * 支持可配置项 如下参数 */ function Tab(){ this.config = { ...
- react简单的tab切换 (styled-components)
其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 ...
- DIV+CSS 样式简单布局Tab 切换
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- CSS3 :target伪类实现Tab切换效果
用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...
- react实现的tab切换组件
我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...
随机推荐
- CSS3 布局
1.1 列布局 CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时 ...
- (原) Jquery 判断移动设备是IOS / Android系统
var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > - ...
- VS单元测试入门实践教程
摘要:本教程不会介绍单元测试的基本理论知识,也不会和大家讨论在实际项目中是否需要写单元测试代码的问题.但是如果你此时想使用VS中的单元测试的工具来测试某个方法是否正确,可你又从来没真正实践过,那么本教 ...
- Daily Sentence
2016-12-05 08:59:15 Knowing yourself is the beginning of all wisdom. 智者始于自知. 2016-05-01 19:38:25 The ...
- Oracle使用imp/exop远程导入导出dmp数据
在导入导出数据之前,习惯性的检查一下,看看我们自己的机器可不可以连接远程的Oracle主机,检测方法是tnsping SERVICE_NAME.我的机器如下: C:\Users\zx>tnspi ...
- js创建对象的方式 三种
1. 使用直接量创建1个对象: var aobj = { x : 10, y : function(){ console.log("aobj--> "+this.x); } ...
- HDU 1037 - Keep on Truckin'
没啥可说的... #include <iostream> using namespace std; ; int a,b,c; int main() { while(cin>>a ...
- knockoutjs简单使用
knockoutjs是一个不错的前端MVVM框架,极大的减轻了前端工作开发量,增加前端代码的维护性.主要特点:声明式绑定.依赖跟踪.模块开速开发. 如下代码(官方代码稍做修改) <p> 姓 ...
- PHP zip压缩文件及解压
PHP zip压缩文件及解压 利用ZipArchive 类实现 只有有函数.界面大家自己写 ZipArchive(PHP 5.3 + 已自带不需要安装dll) /** * 文件解压 * @param ...
- BigDecimal类对象的使用详解
双精度浮点型变量double可以处理16位有效数.在实际应用中,需要对更大或者更小的数进行运算和处理.Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行 ...