1. <!DOCTYPE html>
  2.  
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title></title>
  7.     <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
  8.     <style>
  9.         ul {
  10.             list-style: none;
  11.         }
  12.  
  13.         .navbar_item {
  14.             background-color: red;
  15.             float: left;
  16.             margin-left: 5px;
  17.             width: 50px;
  18.             height: 18px;
  19.             text-align: center;
  20.             color: white;
  21.             font-weight: 700;
  22.         }
  23.  
  24.         .bar_item_on {
  25.             background-color: greenyellow;
  26.             border: 3px solid black;
  27.         }
  28.  
  29.         .tab_panel div {
  30.             border: 1px solid black;
  31.             width: 400px;
  32.             height: 294px;
  33.             margin: 2px 2px;
  34.             float: left;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <ul>
  40.         <li class="navbar_item">1</li>
  41.         <li class="navbar_item">2</li>
  42.         <li class="navbar_item">3</li>
  43.     </ul>
  44.     <div style="clear: both; width:410px;height:300px;border:3px solid black" class="tab_panel">
  45.         <div>
  46.             面板1
  47.         </div>
  48.         <div>
  49.             面板2
  50.         </div>
  51.         <div>
  52.             面板3
  53.         </div>
  54.     </div>
  55. </body>
  56. </html>
  57. <script>
  58.     $(function () {
  59.         $('.tab_panel>div').first().show().siblings().hide();
  60.         var aLi = $('.navbar_item');
  61.         aLi.on('click', function () {
  62.             $(this).addClass('bar_item_on').siblings().removeClass('bar_item_on');
  63.             var index = $(this).index();
  64.             $('.tab_panel>div').eq(index).show().siblings().hide();
  65.         });
  66.     });
  67. </script>

　　

jq切换面板的更多相关文章

  1. js面向对象实现切换面板

    js面向对象的特点: 继承(inheritance):对象方法和属性的继承 多态(polymorphism):组件开发 抽象(abstract):抓住核心问题 封装(encapsulation):把功 ...

  2. jq 折面板+tab切换（自己封装的插件哦！！）

    如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...

  3. GUI记事本+切换面板1.1版

    package com.niit.javagui; import java.awt.Color; import java.awt.MenuBar; import java.awt.event.Inpu ...

  4. jq 切换功能toggle

    ---恢复内容开始--- $(document).ready(function () { $(".jianjie").click(function () { $(this).tog ...

  5. angular 选中切换面板

    此方法采用的是没有路由的方式: html5 代码: <div [hidden]="flag"> <li class="music-list-datail ...

  6. jq切换选择项

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

  7. easyui源码翻译1.32--panel(面板)

    前言 昨天发布了表格datagrid的翻译源码 ,easyui的许多插件有依赖关系  比如datagrid 的渲染需要panel.resizable.linkbutton.pagination   今 ...

  8. Jquery Accordion 折叠面板

    属性 类型 默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板 设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...

  9. amazeui学习笔记--js插件（UI增强3）--折叠面板Collapse

    amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...

随机推荐

  1. 用PCA(主成分分析法)进行信号滤波

    用PCA(主成分分析法)进行信号滤波 此文章从我之前的C博客上导入,代码什么的可以参考matlab官方帮助文档 现在网上大多是通过PCA对数据进行降维,其实PCA还有一个用处就是可以进行信号滤波.网上 ...

  2. 从字节码和JVM的角度解析Java核心类String的不可变特性

    1. 前言 最近看到几个有趣的关于Java核心类String的问题. String类是如何实现其不可变的特性的,设计成不可变的好处在哪里. 为什么不推荐使用+号的方式去形成新的字符串,推荐使用Stri ...

  3. .NET 创建 classlib时，netcoreapp2.0与netstandard2.0的区别

    最近单位在开发一个新项目,在技术选型的时候,我们决定后台代码全部使用 dot net core来进行开发. 当项目引用公司之前的一个类库的时候,总是出现缺少XX组件的错误,所以我们检查了所有的类库,将 ...

  4. （3）STM32使用HAL库操作外部中断——实战操作

    有了上一篇的基础入门知识,使用Cube创建一个简单的外部中断就容易多了. 一.Cube配置 需求:使用PD10作为外部中断(下降沿触发)控制LED(PD12-PD14) 1.选型 STM32-F4-D ...

  5. 字符串、List集合、数组互转

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Songti SC"; color: #3933ff } p.p2 { ...

  6. UWP中实现大爆炸效果（二）

    上一回实现了一个宽度不均匀的Panel,这次我们编写一个简单的BigbangView主体. 首先创建一个模板化控件,删掉Themes/Generic.xaml中的<Style TargetTyp ...

  7. .Net Core 权限验证与授权（AuthorizeFilter、ActionFilterAttribute）

    在.Net Core 中使用AuthorizeFilter或者ActionFilterAttribute来实现登录权限验证和授权 一.AuthorizeFilter 新建授权类AllowAnonymo ...

  8. asp.net core系列 54 IS4用客户端凭据保护API

    一. 概述 本篇开始进入IS4实战学习,从第一个示例开始,该示例是 “使用客户端凭据保护API”,这是使用IdentityServer保护api的最基本场景.该示例涉及到三个项目包括:Identity ...

  9. java游戏开发杂谈 - java编程怎么学

    java语言包含很多的知识点,我们并不需要把java语言的知识点都学全了,才开始编程.      你只需要了解: 1,java的数据类型和变量定义 2,类和对象的初步印象. 3,if-else, wh ...

  10. 【Python3爬虫】常见反爬虫措施及解决办法（二）

    这一篇博客,还是接着说那些常见的反爬虫措施以及我们的解决办法.同样的,如果对你有帮助的话,麻烦点一下推荐啦. 一.防盗链 这次我遇到的防盗链,除了前面说的Referer防盗链,还有Cookie防盗链和 ...