<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>

    <style>

        ul {

            list-style: none;

        }

        .navbar_item {

            background-color: red;

            float: left;

            margin-left: 5px;

            width: 50px;

            height: 18px;

            text-align: center;

            color: white;

            font-weight: 700;

        }

        .bar_item_on {

            background-color: greenyellow;

            border: 3px solid black;

        }

        .tab_panel div {

            border: 1px solid black;

            width: 400px;

            height: 294px;

            margin: 2px 2px;

            float: left;

        }

    </style>

</head>

<body>

    <ul>

        <li class="navbar_item">1</li>

        <li class="navbar_item">2</li>

        <li class="navbar_item">3</li>

    </ul>

    <div style="clear: both; width:410px;height:300px;border:3px solid black" class="tab_panel">

        <div>

            面板1

        </div>

        <div>

            面板2

        </div>

        <div>

            面板3

        </div>

    </div>

</body>

</html>

<script>

    $(function () {

        $('.tab_panel>div').first().show().siblings().hide();

        var aLi = $('.navbar_item');

        aLi.on('click', function () {

            $(this).addClass('bar_item_on').siblings().removeClass('bar_item_on');

            var index = $(this).index();

            $('.tab_panel>div').eq(index).show().siblings().hide();

        });

    });

</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. 信息论随笔3: 交叉熵与TF-IDF模型

    接上文:信息论随笔2: 交叉熵.相对熵,及上上文:信息论随笔 在读<数学之美>的时候,相关性那一节对TF-IDF模型有这样一句描述:"其实 IDF 的概念就是一个特定条件下.关键 ...

  2. eclipse使用javaFX写一个HelloWorkld

    ------------------------------------------------ 操作系统:Ubuntu18.04 EclipseVersion: Oxygen.3a Release ...

  3. sau交流学习社区--在element-ui中新建FormData对象组合上传图片和文件的文件对象，同时需要携带其他参数

    今天有一个坑,同时要上传图片和文件,而且图片要展示缩略图,文件要展示列表. 我的思路是: 首先,只上传附件照片,这个直接看ele的官方例子就行,不仅仅上传附件照片,还同时上传其他参数. 然后,再做上传 ...

  4. 【RecyclerView优化】

    1.局部刷新 (1)避免整个列表的数据更新,只更新受影响的布局.例如,加载更多时,不使用notifyDataSetChanged(),而是使用notifyItemRangeInserted(range ...

  5. Python与家国天下

    导读:Python猫是一只喵星来客,它爱地球的一切,特别爱优雅而无所不能的 Python.我是它的人类朋友豌豆花下猫,被授权润色与发表它的文章.如果你是第一次看到这个系列文章,那我强烈建议,请先看看它 ...

  6. 如何定义开发完成？（Definition of Done）

    最近在拜读郑晔的10x程序员工作法,收益良多,文中提出一个概念叫DoD(Definition of Done)给我的感触颇深.这让我联想到实际工作过程中,经常遇到的扯皮.争吵等各种场景,其实就和这个D ...

  7. asp.net core系列 29 EF模型配置(查询类型,关系数据库建模)

    一.查询类型 此功能是EF Core 2.1中的新功能. EF Core除了实体类型之外,EF Core模型还可以包含查询类型,这些查询类型是针对“未映射到实体类型”的数据获取.比如视图,或只读数据表 ...

  8. Nuget（BagGet）使用教程

    Nuget(BagGet)使用教程 1. 服务器安装ASP.NET Core 网上有很多教程,不多讲,链接给你:https://www.cnblogs.com/Agui520/p/8331499.ht ...

  9. 总结微信公众平台网页开发中遇到的ios的兼容问题

    1. ios中音频不自动播放: 原因:出于节省流量的初衷,ios系统禁止音视频自动播放. 解决方案:使用微信的JS-SDK. DEMO: 先引入微信的JS-SDK, <script src=&q ...

  10. GreenDao的初次使用--号称Android最快的关系型数据库

    一.准备工作 1.项目build.gradle文件下的dependencies中引入插件: classpath 'org.greenrobot:greendao-gradle-plugin:3.2.1 ...