js封装选项卡
<div class="forestcamp_box">
<img src="img/home_02.jpg" />
<div class="subtitle" id="button">
<p>通知公告</p>
<p>政策解读</p>
<div>查看更多 >></div>
</div>
<div id="text" class="main_matter">
<div class="main_matter">
<p>黔西南高速交警大队“四个狠抓” 强化道路交通事故预防工作</p>
<p>扩大共识,精诚合作——中俄运输合作分委会第22次会议在俄......</p>
<p>何建中在湖北调研时指出:进一步做好总体谋划完善标准规范......</p>
<p>【评论】平台公司应当将“自责”落实到行动上</p>
<p>【见证40年·我们的奋斗故事】“内河船不跨省” 到江海联运通全球</p>
<p>云南首个高速公路债券项目上市募资</p>
<p>《2017年全国收费公路统计公报》解读</p>
<p>交通运输部关于《通航建筑物运行管理办法(征求意见稿)》公开......</p>
</div>
<div class="main_matter">
<p>【见证40年·我们的奋斗故事】“内河船不跨省” 到江海联运通全球</p>
<p>云南首个高速公路债券项目上市募资</p>
<p>《2017年全国收费公路统计公报》解读</p>
<p>交通运输部关于《通航建筑物运行管理办法(征求意见稿)》公开......</p>
</div>
</div>
</div>
没有把贴入,看贴图吧

封装好的选项卡进行调用
change({
btnsId:"button",//传入按钮父级id
contsId:"text",//传入块元素父级id
btnsClassNormal:"title_noraml",// 传入按钮未点击样式
btnsClassSpecial:"title_specil"//传入按钮点击后样式
});
对选项卡进行封装
function change(cha){
var btns = document.getelementById(cha.btnsId).children;//获取你要进行点击的按钮
var conts = document.getelementById(cha.contsId).children;//获取你要对应操作的块
for (var i=0;i<btns.length;i++) {
btns[i].index = i; //设置一个index属性使按钮和块进行对应
btns[i].onclick=function(){
for (var j=0;j<conts.length;j++) {//清空
btns[j].className = cha.btnsClassNormal;
conts[j].style.display = "none";
}
this.className = cha.btnsClassSpecial;//点击的进行样式添加
conts[this.index].style.display = "block";//对应块显示出来
}
}
}
js封装选项卡的更多相关文章
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 使用NW.js封装微信公众号菜单编辑器为桌面应用
开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单,如果每个人都去开发这个不经常使用的功能确实有点浪费时间.前段时间在github上找到一个仿企业号的菜单编辑界面,结合微信的C# SDK开发 ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 使用原生JS封装Ajax
使用原生 的JS封装 Ajax,实现 仿JQuery的Ajax,post,get三种异步请求方式: var MAjax = { //根据浏览器创建异步对象 createXhr: function () ...
- js封装的方法
1.JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦.通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置. 2.JS封装的方法有函数方式.对象的方式.闭包的方式. 举 ...
- js实现选项卡
通过JavaScript实现如上选项卡切换的效果. 实现思路: 一.HTML页面布局 选项卡标题使用ul..li 选项卡内容使用div 二.CSS样式制作 整个选项卡的样式设置 选项卡标题的样式设置 ...
- 用js实现选项卡切换效果
这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...
- JS封装cookie操作函数实例(设置、读取、删除)
本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...
随机推荐
- Latex: 参考文献双栏对齐
参考: How to level columns in bibliography? Latex: 参考文献双栏对齐 需要实现的效果: 方法1: 在开头引用balance: \usepackage{ba ...
- pip安装第三方库镜像源选择
在pip安装时,有些库速度及其缓慢从而导致失败,可以通过更改镜像源的方式来安装. 我在安装的时候使用了清华的镜像源,格式如下: 想要安装什么库就在后面替换即可.
- DAY6 元组、字典与集合
一.元组 定义:t1 = (1, 2) # t1 = tuple((1,2)) 特点:有序存储.可存放多个数据.不可变(内部可以包含可变对象,可变对象已久可变) 应用场景:将不允许操作的列表可以转化为 ...
- bootStrap table 和 JS 开发过程中遇到问题汇总
1..bootStrap-table表头固定 在table定义的时候给高度属性就可以自动生成滚动条,并且固定表头[height: 220,] 2.为动态生成的DOM元素绑定事件 on("cl ...
- pycharm 倒入request包方法(新手)
1.先安装request模块,在pycharm import,但是怎么也倒不进去,咨询了开发,原来需要把包倒入到pycharm 编译器里面才可以import 成功,具体操作步骤如下 首先确认下自己电脑 ...
- [Hibernate] inner Join和 left Join
@Test public void test11(){ Session ss=HibernateUtil.getSession(); //根据员工名称(SCOTT)找到和他所在的部门的其他员工的信息 ...
- Nearest neighbor graph | 近邻图
最近在开发一套自己的单细胞分析方法,所以copy paste事业有所停顿. 实例: R eNetIt v0.1-1 data(ralu.site) # Saturated spatial graph ...
- 『Numpy』内存分析_高级切片和内存数据解析
在计算机中,没有任何数据类型是固定的,完全取决于如何看待这片数据的内存区域. 在numpy.ndarray.view中,提供对内存区域不同的切割方式,来完成数据类型的转换,而无须要对数据进行额外的co ...
- Django框架简介-模板系统
2.4 模板 官方文档 2.4.1 常用语法 只需要记两种特殊符号: {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 2.4.1.1 变量 {{ 变量名 }} 变量名由字母数 ...
- 多线程thread的使用
1.thread是多线程,凡是thread的子类都是一个线程. 2.thread必须调用start方法进开启线程,不能直接调用Runnable中的run方法,因为直接调用run方法没有创建新的线程,就 ...