JQuery简单标签页实现
<!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简单标签页实现的更多相关文章
- jquery实战---标签页效果
在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...
- 实战Jquery(四)--标签页效果
这两天完毕了实战四五六的样例,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗体效果,都是web层经常使用的效果.越到后面越发认为技术这东西,就是一种思路的展现,懂了要实现 ...
- 类似Jquery ui 标签页(Tabs)
<div class="indexnew_tit"> <a href="javascript:;" class="on"& ...
- Jquery 组 标签页
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- 标签页(tab)切换的原生js,jquery和bootstrap实现
概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- jquery ui 常用(一)(自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| )
条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...
- 如何一行jquery代码写出tab标签页(链式操作)
啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...
- [置顶] JQuery实战总结三 标签页效果图实现
在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...
随机推荐
- sublime text3下BracketHighlighter的配置方法
st3的配置方法和st2是有区别的,所以网上搜索到的方法大多不能用,我google之后总结了一下. 一. 1.在st3中按preferences-->package settings--> ...
- 【51Nod 1616】【算法马拉松 19B】最小集合
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1616 这道题主要是查询一个数是不是原有集合的一个子集的所有数的gcd. ...
- UIDynamic(重力行为+碰撞检测)
一.重力行为 说明:给定重力方向.加速度,让物体朝着重力方向掉落 1.方法 (1)UIGravityBehavior的初始化 - (instancetype)initWithItems:(NSArra ...
- 再次认识ASP.NET MVC
MVC, V,就是View.视图 M,只应该是ViewModel.视图模型 C,Controller.控制器 我们需要怎么看待并使用这三者. 从你敲入url,我们可以做为入口. 当你敲入url并按了回 ...
- 深入理解javascript原型和闭包(3)——prototype原型
既typeof之后的另一位老朋友! prototype也是我们的老朋友,即使不了解的人,也应该都听过它的大名.如果它还是您的新朋友,我估计您也是javascript的新朋友. 在咱们的第一节(深入理解 ...
- yaf设置命名空间
修改yaf配置文件 文件是:yaf.ini extension=yaf.so yaf.use_namespace=1 index文件. 目录是application/controllers/Index ...
- 前端项目构建工具---Grunt
什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...
- UGUI 学习笔记
1.UGUI中是没有depth的概念,那要怎么在脚本中动态的改变一个UI元素在hierarchy中的排序位置呢? 放到最上面 Transform.SetAsFirstSibling最下面Transfo ...
- .htaccess 基础教程(三)RewriteCond标志符,RewriteRule适用的标志符
1.利用 .htaccess 防止盗链 如果不喜欢别人在他们的网页上链接自己的图片.文档的话,也可以通过htaccess的指令来做到.当然这样也可以对你的网站服务器压力变小! 这次先给出‘代码’,然后 ...
- 第2月第24天 coretext 行高
1.NSMutableAttributedString 行高 NSMutableAttributedString *attributedString = [[NSMutableAttributedSt ...