<!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. 记一次logback传输日志到logstash根据自定义设置动态创建ElasticSearch索引

    先说背景,由于本人工作需要创建很多小应用程序,而且在微服务的大环境下,服务越来越多,然后就导致日志四分五裂,到处都有,然后就有的elk,那么问题来了 不能每个小应用都配置一个 logstash 服务来 ...

  2. js多个元素随机且不重叠分布在页面中

    最近,公司要做一个类似挖矿的项目,大概其是当用户登录进入首页后,如果用户有已经生成的原力值,则在其点击原力值后可以类似蚂蚁森林那样收集原力值,当用户将所有的原力值收集完毕后开始提醒用户新的原力值正在生 ...

  3. python的知识统计笔记

    python的发展

  4. 点击a标签实现txt文件另存的效果

    亲测成功,使用servlet实现的,核心代码: 前台代码: function downModel(filePath){ var formFile=$("<form>") ...

  5. Scala 枚举介绍及深入应用

    本文详细地总结了Scala枚举的几种实现方式,对我们更好地进行函数式编程有很好地指导和帮助. Scala 枚举示例和特性 枚举(Enumerations)是一种语言特性,对于建模有限的实体集来说特别有 ...

  6. MIP技术进展月报第3期：MIP小姐姐听说，你想改改MIP官网？

    一. 官网文档全部开源 MIP 是一项永久的开源的项目,提供持续优化的解决方案,当然官网也不能例外.从现在开始,任何人都可以在 MIP 官网贡献文档啦! GitHub 上,我们已经上传了 <官网 ...

  7. 负载，性能测试工具-Gatling

    前言 Gatling Gatling是一款功能强大的负载测试工具,它为易于使用,高可维护性和高性能而设计. 开箱即用,Gatling由于对HTTP协议的出色支持,使其成为负载测试任何HTTP服务器的首 ...

  8. 【TCP协议】(3)---TCP粘包黏包

    [TCP协议](3)---TCP粘包黏包 有关TCP协议之前写过两篇博客: 1.[TCP协议](1)---TCP协议详解 2.[TCP协议](2)---TCP三次握手和四次挥手 一.TCP粘包.拆包图 ...

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

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

  10. List-LinkedList、set集合基础增强底层源码分析

    List-LinkedList 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 继上一章继续讲解,上章内容: List-ArreyLlist集合基础增强底层源码分析:https:// ...