实现内容随菜单切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.min.js"></script>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        .tab_outer{

            margin: 0px auto;

            width: 60%;

        }

        .menu{

            background-color: #cccccc;

            line-height: 40px;

        }

        .menu li{

            display: inline-block;

        }

        .menu a{

            border-right: 1px solid red;

            padding: 11px;

        }

        .content{

            background-color: tan;

            border: 1px solid green;

            height: 300px;

        }

        .hide{

            display: none;

        }

        .current{

            background-color: darkgray;

            color: yellow;

            border-top: solid 2px rebeccapurple;

        }

    </style>

</head>

<body>

    <div class="tab_outer">

        <ul class="menu">

            <li xxx="c1" class="current" onclick="tab(this);">菜单一</li>

            <li xxx="c2" onclick="tab(this);">菜单二</li>

            <li xxx="c3" onclick="tab(this);">菜单三</li>

        </ul>

        <div class="content">

            <div id="c1">内容一</div>

            <div id="c2" class="hide">内容二</div>

            <div id="c3" class="hide">内容三</div>

        </div>

    </div>

<script>

    function tab(self){

        $(self).addClass("current").siblings().removeClass("current");

        var s = $(self).attr("xxx");

        $("#"+s).removeClass("hide").siblings().addClass("hide");

    }

</script>

</body>

</html>

jQuery 练习：tab 切换的更多相关文章

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

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

  2. JQuery实现tab切换

    JQuery实现tab切换: (jquery需要自己添加) <!DOCTYPE html> <html lang="en"> <head> &l ...

  3. jquery 实现tab切换

    大家都知道 使用QQ的时候需要输入账号和密码 这个时候一个TAB键盘就可以实现切换到下一个输入框里 具体是怎么实现的呢 请看代码 <!DOCTYPE html> <html lang ...

  4. jquery简易tab切换

    切换tab 使用eq()函数 eq() 方法将匹配元素集缩减值指定 index 上的一个. //为项目 3 设置红色背景 <ul> <li>list item 1</li ...

  5. jQuery带tab切换搜索框样式代码

    效果体验:http://hovertree.com/texiao/jquery/23/ 代码如下,保存到HTML文件也可以查看效果: <!DOCTYPE html> <html la ...

  6. 简单的jquery实现tab切换

    $(document).ready(function(){ $(".nav-menu-ctn").find("a").click(function(){ $(t ...

  7. jquery版tab切换效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 通过jquery实现tab切换

    //css代码 *{ margin: 0; padding: 0; } #box{ margin: 0 auto; width: 800px; border: 5px solid #000000; o ...

  9. jquery写tab切换,三行代码搞定

    <script type="text/javascript"> $("button").on("click",function( ...

  10. JQuery 实现 Tab 切换 index

    $(function(){ var h_new=$('.new h4 a'); var new_dl=$('.new dl'); new_dl.first().show(); h_new.mousee ...

随机推荐

  1. 解决Java中There is no getter for property XXX'XXX' in 'class XXX'的问题

    当你出现There is no getter for property XXX'XXX' in 'class XXX'时, 就是在你的这个类中没有找到你这个属性. 检查两个地方 1.你的返回值类型是否 ...

  2. psnr的定义和python实现

    psnr是“Peak Signal to Noise Ratio”的缩写,即峰值信噪比,是一种评价图像的客观标准,它具有局限性,一般是用于最大值信号和背景噪音之间的一个工程项目. peak的中文意思是 ...

  3. Ubuntu 18.04安装配置pure-ftpd解决中文乱码问题

    之前用的是vsftpd配置ftp服务器,前面用的挺好,没什么问题,但是后面接收设备上传的文件夹时发现了一个大坑,当设备上传的文件夹名字中包含中文时,在Linux上显示的是乱码...各种转码都不行,折腾 ...

  4. ES6常用特性总览

    以前看过一遍es6,今天面试时被问到了一个很简单的es6特性,竟然没回答上来,特来重温一下es6,做个总结性笔记. 一.什么是es6 es6是新版本JavaScript语言的标准,在2015年6月发布 ...

  5. SpringBoot2.1整合finereport10（帆软报表）

    最近,公司采购了帆软的系统,领导安排要与公司的SpringBoot框架进行整合.费了一番牛劲,终于整合成功,下面分享一下我的经验. 首先,我的开发环境是Intellij IDEA,使用的SpringB ...

  6. TransactionScope事务处理方法介绍及.NET Core中的注意事项

    作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/10170712.html 今天在写CzarCms的UnitOfWork的使用使用到了这个Transacti ...

  7. mybatis框架(4)---输入输出映射

    输入输出映射 通过parameterType制定输入参数类型 类型可以是简单类型(int String)也可以是POJO本身 或者包装类 1输入映射 关于输入简单类型和pojo本身的我就不写了,因为比 ...

  8. MemcachedUI-一款基于.NET MVC编写的Memcached监控软件

    一.起源 服务器上使用了Memcached做缓存加速,但是想查看Memcached状态的时候都只能telnet 127.0.0.1 11211 这样来查看,甚是累人,就想能不能做一款web端的软件,方 ...

  9. centos 7 linux系统默认ftp安装配置和部署（详细讲解）

    小生接触 Linux 系统时间不长,想解决linux系统ftp安装及部署问题,折腾了大半天,终于弄出来了,将各路高手的配置方法综合了一下,如有不对之处,欢迎各位看客指正,感谢! 一.声明: 本文采用操 ...

  10. MyEclipse忽略js报错

    MyEclipse对官网下载的js报错,解决办法如下: 1. 对js文件右键选择 MyEclipse --> Exclude From Validation 2. 然后继续右键执行MyEclip ...