<!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. XML错误信息Referenced file contains errors (http://www.springframework.org/schema/beans/spring-beans-4.0.xsd). For more information, right click on the message in the Problems View ...

    错误信息:Referenced file contains errors (http://www.springframework.org/schema/beans/spring-beans-4.0.x ...

  2. 关于Redis的常见面试题解析

    1. 使用redis有哪些好处? (1) 速度快,因为数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1) (2) 支持丰富数据类型,支持string,li ...

  3. 对Tomcat 8.0进行JVM层面的优化(基于Oracle JDK 8)

    目录 1 Tomcat的内存调优 1.1 Tomcat的内存占用 1.2 内存配置相关参数 1.3 内存调优实践 1.4 验证配置效果 2 GC策略调优实践 Tomcat容器是运行在JVM上的, 其默 ...

  4. 最详细的Windows平台安装MongoDB教程

    一.MongoDB简介 MongoDB是一个基于分布式文件存储的数据库,由C++语言编写,旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB将数据存储为一个文档,数据结构由键值(ke ...

  5. SpringCloud学习系列之五-----配置中心(Config)和消息总线(Bus)完美使用版

    前言 在上篇中介绍了SpringCloud Config的使用,本篇则介绍基于SpringCloud(基于SpringBoot2.x,.SpringCloud Finchley版)中的分布式配置中心( ...

  6. 《k8s-1.13版本源码分析》-调度预选

    本文大纲 预选流程 predicate的并发 一个node的predicate predicates的顺序 单个predicate执行过程 具体的predicate函数 本系列文章已经开源到githu ...

  7. 30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传（文末附带demo下载）

    现在的项目开发基本上都用到了上传文件功能,或图片,或文档,或视频.我们常用的常规上传已经能够满足当前要求了, 然而有时会出现如下问题: 文件过大(比如1G以上),超出服务端的请求大小限制: 请求时间过 ...

  8. 动态路由协议（RIP）

    虽然静态路由在某些时刻很有用,但是必须手工配置每条路由条目,对于大中型的网络或拓补经常发生变化的清空,配置和维护静态路由的工作量就变得非常繁重,而且不小心还容易出错,因此就需要一种不需要手工配置的路由 ...

  9. office365的开发者训练营，免费，在微软广州举办

    本活动在微软官网的地址: https://www.microsoft.com/china/events/detail_1707   先上活动内容:   Office 365每月有超过1亿的商业活跃用户 ...

  10. SQLServer之创建数据库架构

    创建数据库架构注意事项 包含 CREATE SCHEMA AUTHORIZATION 但未指定名称的语句仅允许用于向后兼容性. 该语句未引起错误,但未创建一个架构. CREATE SCHEMA 可以在 ...