<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<style>
.choose {
margin: .5em 0;
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
}

.choose-show {
padding: .5em;
font-size: 14px;
}

.choose-hidden {
position: relative;
z-index: 999;
}

.choose-hidden-nav {
width: 50%;
float: left;
}

.choose-hidden-nav ul {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
}

.choose-hidden-nav ul li {
padding: 6px 0 6px 0;
background-color: #ccdce0;
}

.choose-hidden-nav ul li.active {
background-color: #d9f5fc;
}

.choose-hidden-content {
width: 50%;
float: left;
}

.choose-hidden-content ul {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
background-color: #d9f5fc;
}

.choose-hidden-content ul li {
padding: 6px 0 6px 0;
}
</style>
</head>

<body>
<div class="choose">
<div class="choose-show">防冻液更换 <i class="fa fa-chevron-down"></i></div>
<!--BEGIN CHOOSE-HIDDEN -->
<div class="choose-hidden" style="display:none">
<div class="choose-hidden-nav">
<ul>
<li class="active" name="cont1"><a>汽车美容</a></li>
<li name="cont2"><a>美容</a></li>
</ul>
</div>
<div class="choose-hidden-content cont1">
<ul class="active">
<li><a>洗车</a></li>
<li><a>护理</a></li>
</ul>
</div>
<div class="choose-hidden-content cont2" style="display:none">
<ul>
<li><a>234</a></li>
<li><a>234</a></li>
</ul>
</div>
</div>
<!--END CHOOSE-HIDDEN -->
</div>
<script src="jQuery-2.1.4.min.js"></script>
<script>
$(".choose-show").click(function () {

$(".choose-hidden").toggle();

})

$("document").ready(function () {

$(".choose-hidden-nav>ul>li").each(function () {

$(this).click(function () {

if (!$(this).hasClass('active')) {

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

} else {

$(this).siblings('.active').removeClass('active');

}

var target = $(this).attr('name');

$("." + target).show();

$("." + target).siblings('.choose-hidden-content').hide();

});

});

});

</script>
</body>

</html>

JQuery简单标签页实现的更多相关文章

  1. jquery实战---标签页效果

    在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...

  2. 实战Jquery(四)--标签页效果

            这两天完毕了实战四五六的样例,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗体效果,都是web层经常使用的效果.越到后面越发认为技术这东西,就是一种思路的展现,懂了要实现 ...

  3. 类似Jquery ui 标签页(Tabs)

    <div class="indexnew_tit"> <a href="javascript:;" class="on"& ...

  4. Jquery 组 标签页

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  5. 标签页（tab）切换的原生js,jquery和bootstrap实现

    概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...

  6. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  7. jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

  8. 如何一行jquery代码写出tab标签页（链式操作）

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

  9. [置顶] JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

随机推荐

  1. MyBatis的foreach标签与SUM函数同时使用

    最近在项目中遇到一个,需要根据传入的存有id的list,计算值,再起别名 <if test="channelList != null and channelList.size()> ...

  2. jprofiler_监控远程linux服务器的tomcat进程(实践)

    一.软件列表: windows和linux的jprofiler的版本必须一致 1.jprofiler_linux_9_1_1.tar.gz 2.jprofiler_windows_x64 9_1_1 ...

  3. 使用mailx发送邮件

    转载:http://www.cnblogs.com/softwaretesting/archive/2011/11/23/2260520.html http://www.cnblogs.com/sof ...

  4. 解决：Win 10安装软件时提示：文件系统错误 （-1073740940）

    1.win+R输入 gpedit.msc 2.左边计算机配置 windows设置——安全设置——本地策略——安全选项 3.在安全选项右边选择 用户账户控制:管理员批准模式中管理员的提升权限提示的行为, ...

  5. Servlet和JSP学习指导与实践（一）：Servlet API初探

    前言: JavaSE如何跨度到JavaEE?原本java语言只是专门用于application桌面小应用程序的开发,但自从其追随CGI进入服务器端的开发之后便一发不可收拾.先是Servlet1.0,再 ...

  6. Android,不小心关闭了某个小窗口怎么恢复,方法介绍

    Window > Show View > Other 需要哪个窗口就用哪个~

  7. bzoj3033

    欧拉路,这题好神啊QAQ 显然选择的方案数有2^n种,因为每个点度数都为二所以肯定是一条欧拉路, 第二问直接爆搜即可... ----然而我并没有想到---- 第一问我推出来了(别问我怎么推的,我说我是 ...

  8. IBatis 2.x 和 MyBatis 3.0.x 的区别(从 iBatis 到 MyBatis)

    从 iBatis 到 MyBatis,你准备好了吗? 对于从事 Java EE 的开发人员来说,iBatis 是一个再熟悉不过的持久层框架了,在 Hibernate.JPA 这样的一站式对象 / 关系 ...

  9. C# 中的委托和事件（转）

    引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易了,而没有过去 ...

  10. 安卓3D游戏-神奇宝贝防御战

    我和同学用unity引擎做的,作为软件工程的大作业. 是一个花费金钱抓怪.控制怪物站位.击杀进攻的敌人获得金钱的类似塔防的安卓游戏. 下载地址:http://pan.baidu.com/s/1gdpH ...