选项卡包选项卡(传参)(无动画版)
一、效果图。
二、HTML+CSS。
<style>
*{ padding:0; margin:0; font-size:12px;}
li{list-style:none;}
a{ text-decoration:none;}
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}
.box{ width:958px; border:1px solid #c6c6c6; height:328px; margin:90px auto;}
.left{ width:168px; float:left;}
.right{ width:790px; float:right; overflow:hidden; }
.list_btn li{ width:168px; height:80px; border-top:1px solid #fff; border-bottom:1px solid #c6c6c6; background:#e7e7e7; font-size:30px; text-align:center; line-height:80px; color:#333; cursor:pointer; font-weight:bold;}
.list_btn .active{ background:#fff;}
.list_box{ display:none;}
.list_box img{ width:790px; height:328px;}
.right_par{ position:relative; height:328px; display:none;}
.btn{ height:30px; width:820px; position:absolute; left:0; bottom:0;}
.btn li{ width:272px; border-right:1px solid #fff; background:#5a5a52; cursor:pointer;height:30px; float:left; color:#fff; font-size:14px; text-align:center; line-height:30px;}
.btn1 li{ width:197px;}
.btn2 li{ width:160px;}
.btn .curr{background:#ef3163;}
</style>
<div class="box">
<div class="left">
<ul class="list_btn" id="list_btn">
<li class="active">豪车</li>
<li>家具</li>
<li>壁纸</li>
<li>蛋糕</li>
</ul>
</div>
<div class="right" id="right">
<div class="right_par" style="display:block;">
<div class="list_par" id="list_par" >
<div class="list_box" style="display:block"><img src="img/card1.jpg" alt="" /></div>
<div class="list_box"><img src="img/card2.jpg" alt="" /></div>
<div class="list_box"><img src="img/card3.jpg" alt="" /></div>
</div>
<ol class="btn" id="btn">
<li class="curr">豪车一</li>
<li>豪车二</li>
<li>豪车三</li>
</ol>
</div>
<div class="right_par">
<div class="list_par" id="list_par1">
<div class="list_box"><img src="img/card4.jpg" alt="" /></div>
<div class="list_box"><img src="img/card5.jpg" alt="" /></div>
<div class="list_box"><img src="img/card6.jpg" alt="" /></div>
<div class="list_box" style="display:block"><img src="img/card7.jpg" alt="" /></div>
</div>
<ol class="btn btn1" id="btn1">
<li>家具一</li>
<li>家具二</li>
<li>家具三</li>
<li class="curr">家具四</li>
</ol>
</div>
<div class="right_par">
<div class="list_par" id="list_par2">
<div class="list_box"><img src="img/card8.jpg" alt="" /></div>
<div class="list_box"><img src="img/card9.jpg" alt="" /></div>
<div class="list_box" style="display:block"><img src="img/card10.jpg" alt="" /></div>
<div class="list_box"><img src="img/card11.jpg" alt="" /></div>
<div class="list_box"><img src="img/card12.jpg" alt="" /></div>
</div>
<ol class="btn btn2" id="btn2">
<li>壁纸一</li>
<li>壁纸二</li>
<li class="curr">壁纸三</li>
<li>壁纸四</li>
<li>壁纸五</li>
</ol>
</div>
<div class="right_par">
<div class="list_par" id="list_par3">
<div class="list_box" style="display:block"><img src="img/cake1.jpg" alt="" /></div>
<div class="list_box"><img src="img/cake2.jpg" alt="" /></div>
<div class="list_box"><img src="img/cake3.jpg" alt="" /></div>
</div>
<ol class="btn" id="btn3">
<li class="curr">蛋糕一</li>
<li>蛋糕二</li>
<li>蛋糕三</li>
</ol>
</div>
</div>
</div>
三、javaScript。
var oDiv =document.getElementById('right');
var aDiv =oDiv.getElementsByTagName('div');
var oUl =document.getElementById('list_btn');
var aLi =oUl.getElementsByTagName('li');
var aDivArr=[];
for(var i=0;i<aDiv.length;i++){
if(aDiv[i].className =='right_par'){
aDivArr.push(aDiv[i]);
}
}
for(var i=0;i<aLi.length;i++){
aLi[i].index =i;
aLi[i].onclick = function(){
for(var i=0;i<aLi.length;i++){
aLi[i].className ='';
aDivArr[i].style.display ='none';
}
this.className ='active';
aDivArr[this.index].style.display ='block';
}
}
fnParam('list_par','btn','onclick');
fnParam('list_par1','btn1','onmouseover');
fnParam('list_par2','btn2','onclick');
fnParam('list_par3','btn3','onmouseover');
}
function fnParam(oDiv,oOl,evt){
var oDivTwo =document.getElementById(oDiv);
var aDivTwo =oDivTwo.getElementsByTagName('div');
var oOl =document.getElementById(oOl);
var aLiTwo =oOl.getElementsByTagName('li');
var aDivTwoArr =[];
//var oldLi=aLiTwo[0]; //必须和初始化同步
for(var i=0;i<aDivTwo.length;i++){ //布局时有可能用到多个div,我这里布局就简单的用图片代替了。
if(aDivTwo[i].className =='list_box'){
aDivTwoArr.push(aDivTwo[i]);
}
}
for(var i=0;i<aLiTwo.length;i++){
aLiTwo[i].index =i
aLiTwo[i][evt] = function(){
for(var i=0;i<aLiTwo.length;i++){
aDivTwoArr[i].style.display ='none';
aLiTwo[i].className ='';
}
this.className ='curr';
aDivTwoArr[this.index].style.display ='block';
//oldLi.className =''; //清空上一个,当前添加。
//oldLi=this;
//this.className ='curr';
}
}
四、jquery。
$(function(){
$('#list_btn li').click(function(){
$('#list_btn li').attr('class','');
$('#right .right_par').css('display','none');
$(this).attr('class','active');
$('#right .right_par').eq($(this).index()).css('display','block');
});
fnParam('#btn li','#list_par .list_box','click');
fnParam('#btn1 li','#list_par1 .list_box','mouseover');
fnParam('#btn2 li','#list_par2 .list_box','click');
fnParam('#btn3 li','#list_par3 .list_box','mouseover');
})
function fnParam(odiv,aDiv,evt){
$(odiv).on(evt,function(){
$(odiv).attr('class','');
$(aDiv).css('display','none');
$(this).attr('class','curr');
$(aDiv).eq($(this).index()).css('display','block');
});
}
转载于:https://blog.51cto.com/guoweishuai/1571782
选项卡包选项卡(传参)(无动画版)相关推荐
- 组件传参的终极版,事件车,父子传参的祖宗。
如果简单的组件传参父子,子父传参就够了,但是如果兄弟之间传参就比较麻烦了, 事件车. 最后的还可以关闭 监听消息@click="$root.$off('msg1')
- 【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...
- Go 学习笔记(25)— 并发(04)[有缓冲/无缓冲通道、WaitGroup 协程同步、select 多路监听通道、close 关闭通道、channel 传参或作为结构体成员]
1. 无缓冲的通道 无缓冲的通道(unbuffered channel)是指在接收前没有能力保存任何值的通道. 这种类型的通道要求发送 goroutine 和接收 goroutine 同时准备好,才能 ...
- JS一起学02:函数传参、操作属性第二种方式、提取行间事件、循环、this、焦点问题、联动选择、选项卡焦点图
一.函数传参 1.函数传参:参数就是占位符----函数里定不下来的东西 var a1=function(){ alert(123); }; function a(f){ // 相当于 f=a1 ...
- Apache ab测试工具使用方法(无参、get传参、post传参)
Ab测试工具是apache自带的测试工具,具有简单易上手的特性,下面我总结一下我的使用方法,首先去官方下载apache程序包,我下的最新版本apache2.4.23,下载地址Download - Th ...
- QVD-2023-1953禅道系统 权限绕过 POC 伪静态传参版
# -*- coding: UTF-8 -*- # !/usr/bin/python''' 权限绕过+RCE POC 伪静态传参版 禅道系统 影响版本 安全版本 开源版 17.4以下的未知版本< ...
- 回调函数自定义传参_koroFileHeader:一个用于生成文件头部注释和函数注释的插件...
小金子 读完需要 2分钟 速读仅需 1 分钟 大家好,我是你们的小金子. 今天给大家分享的这个工具呢?对于使用 VS Code 的同学来讲,是一个好东西. koroFileHeader,一个在 vsc ...
- ireport模块之间的动态传参及拼接SQL
1.有些业务逻辑需要在ireport中判断.所以经常将拼接SQL的任务由Parameters的Default Value Expression来完成 ,如果有子模版,则在子模版参数里面处理,怎么将SQ ...
- 路由配置url跳转传参_如何配置路由器以进行网络范围的URL记录
路由配置url跳转传参 Don't be in the dark about who is visiting what web sites on your LAN. Use our two-prong ...
最新文章
- 利用Navigation Timing测量页面加载时间
- 在对人的管理上,项目经理应该做些什么?
- PostgreSQL的高可用与数据复制方案
- MySQL中的BLOB类型
- javascript:window.showModalDialog缓存问题
- 一篇文章彻底了解清楚什么是负载均衡
- 切记!构造函数里面别一定不要初始化其他类,踩过坑的都知道
- Nutanix在中国市场发布多云合作伙伴计划
- 大学计算机应用基础模拟试题,《大学计算机应用基础》模拟试题.doc
- 计算机应用技术三级学科,三个计算机专业的区别是什么?
- nutch2.3 mysql教程_nutch2.2.1+mysql集成教程
- 基于单片机的空气质量(PM2.5)监测系统设计(#0423)
- 3D打印机之Marlin固件配置
- MyBatisPlus 查询selectOne方法
- Insecure CAPTCHA(不安全的验证码)
- excel如何转化成word文件
- 穷爸爸 富爸爸(Rich dad , Poor dad ) 读书笔记(第一课lesson 1)
- 浅谈Java反射的实现原理
- Linux系统中的进程管理
- 浅谈数据清洗的一些要素
热门文章
- BPTT(BackPropagation Through Time)
- 《教学管理与教育研究》杂志简介及投稿须知
- 睡眠即醒 蓝牙_【专利解密】睡觉时能够自动脱落? 杰理智能蓝牙耳机
- 关于OnOK()、OnCancel()、OnClose()、OnDestroy()之间的区别
- Oracle应用之分组函数之ROLLUP用法
- 保险经纪公司代征个税难?如何解决个人佣金结算问题?
- 物流信息不更新?难道丢了?Python快递查询系统已上线,爆赞!
- 范数(norm)介绍
- javaweb(servlet)+jsp+Mysql实现的酒店客房管理系统(功能包含登录、用户管理、住客信息管理、房型管理、房间管理、会员星级管理、订单管理等)
- 开源OA办公平台搭建:流程开发中常见的正则表达式