<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切换的更多相关文章

  1. 简单Tab切换

    延迟Tab切换,使用css中的flex布局,原生js实现.(京东首页菜单也有此延迟功能哦!) 每天进步一丢丢~~ 1.延迟Tab切换 <!DOCTYPE html> <html la ...

  2. jquery实现简单的Tab切换菜单

    实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...

  3. jquery写的tab切换效果 非常简单

    自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...

  4. 简单的Tab切换组件

    由于代码都有注释,所以不多加解释,大家都知道的.直接贴代码: 代码如下: /** * 简单的Tab切换 * 支持可配置项 如下参数 */ function Tab(){ this.config = { ...

  5. react简单的tab切换 (styled-components)

    其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 ...

  6. DIV+CSS 样式简单布局Tab 切换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  7. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  9. react实现的tab切换组件

    我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...

随机推荐

  1. RSA不对称加密,公钥加密私钥解密,私钥加密公钥解密

    RSA算法是第一个能同时用于加密和数字签名的算法,也易于理解和操作. RSA是被研究得最广泛的公钥算法,从提出到现在已近二十年,经历了各种攻击的考验,逐渐为人们接受,普遍认为是目前最优秀的公钥方案之一 ...

  2. C# 利用反射动态调用类成员

    用反射动态调用类成员,需要Type类的一个方法:InvokeMember.对该方法的声明如下(摘抄于MSDN): publicobject InvokeMember(    string name, ...

  3. Excel导入sq server后数据列以科学计数法显示

    一.选中excel数据列如图 二.选择数据--分列 三.选择下一步,下一步,文本 四.完成 五.这样把excel导入到数据库中是以文本形式显示不会出现科学计数法

  4. jQuery 的.data()方法

    jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to ...

  5. hdu 5442 Favorite Donut 最大表示法+kmp

    题目链接 给你一个字符串, 然后把他想象成一个环. 从某一个地方断开,然后逆时针或顺时针, 都可以形成一个字符串, 求字典序最大的那种. 输出断开位置以及是顺时针还是逆时针. 如果两个一样, 输出位置 ...

  6. JQuery DataTables Editor---页面内容修改&&数据库信息修改 (2)

    接上篇博文,详细说一下js代码以及JQuery DataTables Editor---页面内容修改&&数据库信息修改遇到的问题和解决办法. 1.关于dialog 初始化: $(&qu ...

  7. "创业"半年

                作为一个程序员, 因为受够了”给别人实现梦想太累”的念头, 又受到”外面给出更高薪水”的诱惑, 果断离职创业. 但原本是要创业的, 过了半年, 变成了失业, 这其中到底经历了哪 ...

  8. JDK常见问题 环境变量配置

    "javac不是内部命令或外部命令" Windows7 安装"jdk-6u26-windows-x64.exe"后,常提示"javac不是内部命令或外 ...

  9. linux网卡掉包或挂掉解决办法

    最近自己公司网站老出现掉包问题之前以为是网络问题或机房问题,经过N久的排查发现是linux网卡掉包了,下面我来分享我的解决办法.   之前公司的系统由于网卡问题,经常出现掉包(掉包排除攻击的 因素)或 ...

  10. 用 Python脚本生成 Android SALT 扰码

    发布Android 有偿应用时需要随机生成 SALT 扰码夹在文件中,以下是 Python脚本(当然你选择 C/Java/SHELL/Perl 或别的都行) #!/usr/bin/python # F ...