超简单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这种优雅的 ...
随机推荐
- RSA不对称加密,公钥加密私钥解密,私钥加密公钥解密
RSA算法是第一个能同时用于加密和数字签名的算法,也易于理解和操作. RSA是被研究得最广泛的公钥算法,从提出到现在已近二十年,经历了各种攻击的考验,逐渐为人们接受,普遍认为是目前最优秀的公钥方案之一 ...
- C# 利用反射动态调用类成员
用反射动态调用类成员,需要Type类的一个方法:InvokeMember.对该方法的声明如下(摘抄于MSDN): publicobject InvokeMember( string name, ...
- Excel导入sq server后数据列以科学计数法显示
一.选中excel数据列如图 二.选择数据--分列 三.选择下一步,下一步,文本 四.完成 五.这样把excel导入到数据库中是以文本形式显示不会出现科学计数法
- jQuery 的.data()方法
jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to ...
- hdu 5442 Favorite Donut 最大表示法+kmp
题目链接 给你一个字符串, 然后把他想象成一个环. 从某一个地方断开,然后逆时针或顺时针, 都可以形成一个字符串, 求字典序最大的那种. 输出断开位置以及是顺时针还是逆时针. 如果两个一样, 输出位置 ...
- JQuery DataTables Editor---页面内容修改&&数据库信息修改 (2)
接上篇博文,详细说一下js代码以及JQuery DataTables Editor---页面内容修改&&数据库信息修改遇到的问题和解决办法. 1.关于dialog 初始化: $(&qu ...
- "创业"半年
作为一个程序员, 因为受够了”给别人实现梦想太累”的念头, 又受到”外面给出更高薪水”的诱惑, 果断离职创业. 但原本是要创业的, 过了半年, 变成了失业, 这其中到底经历了哪 ...
- JDK常见问题 环境变量配置
"javac不是内部命令或外部命令" Windows7 安装"jdk-6u26-windows-x64.exe"后,常提示"javac不是内部命令或外 ...
- linux网卡掉包或挂掉解决办法
最近自己公司网站老出现掉包问题之前以为是网络问题或机房问题,经过N久的排查发现是linux网卡掉包了,下面我来分享我的解决办法. 之前公司的系统由于网卡问题,经常出现掉包(掉包排除攻击的 因素)或 ...
- 用 Python脚本生成 Android SALT 扰码
发布Android 有偿应用时需要随机生成 SALT 扰码夹在文件中,以下是 Python脚本(当然你选择 C/Java/SHELL/Perl 或别的都行) #!/usr/bin/python # F ...