Tab栏切换布局分析

<body><div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后包装</li><li>商品评价(50000)</li><li>手机社区</li></ul></div></div><div class="tab_con"><div class="item" style="display: block;">商品介绍模块内容</div><div class="item">规格与包装模块内容</div><div class="item">售后保障模块内容</div><div class="item">商品评价(50000)模块内容</div><div class="item">手机社区模块内容</div></div></body>
	*{margin: 0;padding: 0;}.tab_list ul{margin-top: 50px;margin-left: 200px;background-color: #e8e8e8;width: 800px;height: 39px;border: 1px solid red;}.tab_list li{list-style: none;float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current{background-color: red;color: white;}/* .item-info{padding: 20px 0 0 20px;} */.tab_con{margin-left: 200px;}.item{color: #686868;display: none;}
	<script type="text/javascript">var lis = document.querySelector('.tab_list').querySelectorAll('li');var items = document.querySelectorAll('.item');// 1、进行排他思想创建点击事件,使得每次点击时,被点击的li的属性为‘current’,其余的为空//给获取li的lis添加循环绑定事件(排他思想),进行点击事件for (var i = 0; i < lis.length; i++) {//2.1、此时给li添加设置索引号 属性名为indexlis[i].setAttribute('index',i);lis[i].onclick = function(){//干掉所有人,其余的li清除 class 这个类for (var i = 0; i < lis.length; i++) {lis[i].className = '';}//留下本身自己this.className = 'current';// 2、下面显示内容模块//2.2、获取index 中的属性值var index = this.getAttribute('index');console.log(index);//2.3、点击lis时,使得items的内容进行显示// items[index].style.display = 'block';//2.4、干掉所有人,只让被选中的item内容进行显示for (var i = 0; i < items.length; i++) {items[i].style.display = 'none';}//留下自己,进行显示items[index].style.display = 'block';}}</script>

实现效果:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248240.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CLR基础,CLR运行过程,使用dos命令创建、编译、运行C#文件,查看IL代码

CLR是Common Language Runtime的缩写&#xff0c;是.NET程序集或可执行程序运行的一个虚拟环境。CLR用于管理托管代码&#xff0c;但是它本身是由非托管代码编写的&#xff0c;并不是一个包含了托管代码的程序集&#xff0c;所以不能使用IL DASM进行查看&#xff0c;但CLR以dll…

表单的全选取消全选

<div class"wrap"><table border"1" cellspacing"0" cellpadding"0"><caption>恭喜发财</caption><thead><tr><th><input type"checkbox" id"j_cbAll" checked&quo…

HDU 4339 Query

算法: 比赛时没有想到好的算法&#xff0c;暴力是O&#xff08; Q * N &#xff09;肯定超时。 赛后&#xff0c;线段树&#xff0c;树状数组&#xff0c;HASH都能AC&#xff0c;想了下&#xff0c;的确用树状数组 时间复杂度就可以优化到O&#xff08;Q * lgN * lgN) 2000msAC…

201904快速阅读术

在看过了几本数之后&#xff0c;发现原来培养读书的习惯好像也不太难&#xff0c;“将读书融入生活&#xff0c;框定读书时间” 生活中&#xff0c;我确实也是这样执行了。利用每天上下班的时间听书&#xff0c;有些觉得可以读快的书籍用了1.5倍速度在听&#xff0c;难懂的部分…

最简方式 表格编辑 基于 el-table

共下面5点1.新增一个显示和隐藏的参数2.在显示那边新增一个input框&#xff0c;用v-model绑定数据&#xff0c;用v-if来显示和隐藏3.给之前的显示的span标签添加v-else 和上面形成if else4.编辑和保存按钮同理&#xff0c;然后编辑按钮触发的任务将所有输入打开。即seen置为tru…

Spring Boot 自动配置原理

自动配置原理配置文件到底能写什么&#xff1f;怎么写&#xff1f;自动配置原理&#xff1b; 参考&#xff1a;https://docs.spring.io/spring-boot/docs/1.5.9.RELEASE/reference/htmlsingle/#common-application-properties配置文件能配置的属性参照1、自动配置原理&#xff…

C#Socket编程详解(一)TCP与UDP简介

一、TCP与UDP&#xff08;转载&#xff09; 1、TCP 1.1 定义 TCP&#xff08;TransmissionControl Protocol&#xff09;传输控制协议。 是一种可靠的、面向连接的协议&#xff08;eg:打电话&#xff09;、传输效率低全双工通信&#xff08;发送缓存&接收缓存&#xff09;、…

动态创建表格数据

<input type"button" value"创建"><style>*{margin: 0;padding: 0;}table{width: 980px;margin: 50px auto;}table,th,tr,td{text-align: center;border: 1px solid #ccc;}</style><script>var heads [姓名, 年龄, 性别, 学号, 薪…

第四节:EF Core的并发处理

1.说明 和EF版本的并发处理方案一致&#xff0c;需要知道乐观并发和悲观并发的区别&#xff0c;EF Core只支持乐观并发&#xff1b;监控并发的两种方案&#xff1a;监测单个字段和监测整条数据&#xff0c;DataAnnotations 和 FluentApi的两种配置方式。 &#xff08;PS&#x…

JS中的prototype

JS中的phototype是JS中比较难理解的一个部分(转自出处&#xff1a;&#xff08;http://www.cnblogs.com/yjf512/&#xff09;) 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是&#xff0c;现在有1个类A,我想要创建一个类B,…

微博发布案例

推荐在写动态生成标签数据的时候&#xff0c;提前写一遍htmlcss的结构&#xff0c;方便提供写照模板 <div class"box"><!-- 顶部搜索框 --><div class"inputBox"><textarea maxlength"200"></textarea></div&…

1.3 Go语言基础之数据类型

Go语言中有丰富的数据类型&#xff0c;除了基本的整型、浮点型、布尔型、字符串外&#xff0c;还有数组、切片、结构体、函数、map、通道&#xff08;channel&#xff09;等。Go 语言的基本类型和其他语言大同小异。 一、整型 1.1 基本类型 整型分为以下两个大类&#xff1a; 按…

【网络安全】关于ARP攻击的原理以及在Kali Linux环境下的实现

转自&#xff1a;https://www.cnblogs.com/rebrust/p/6096101.html 全文摘要 本文讲述内容分为两部分&#xff0c;前半部分讲述ARP协议及ARP攻击原理&#xff0c;后半部分讲述在Kali Linux环境下如何实现ARP攻击以及ARP欺骗&#xff0c;如果对于ARP攻击的背景和原理不感兴趣的话…

动态创建英雄图片

推荐在写动态生成标签数据的时候&#xff0c;提前写一遍htmlcss的结构&#xff0c;方便提供写照模板 <input type"button" value"按钮"><style type"text/css">* {margin: 0;padding: 0;list-style: none;}ul {width: 600px;margin…

第五节:EF Core中的三类事务(SaveChanges、DbContextTransaction、TransactionScope)

一. 说明 EF版本的事务介绍详见&#xff1a; 第七节: EF的三种事务的应用场景和各自注意的问题(SaveChanges、DBContextTransaction、TransactionScope)。 本节主要介绍EF Core下的三种事务的用法和各自的使用场景&#xff0c;其中SaveChanges和DBContextTransaction事务与EF版…

教你简单理解分布式与传统单体架构的区别

教你简单理解分布式与传统单体架构的区别 原文:教你简单理解分布式与传统单体架构的区别分布式是一种系统架构方式&#xff0c;而在分布式系统中一般基于中间件进行开发&#xff0c;消息中间件是分布式系统中比较核心的中间件之一。这三样东西随便拿出一个来都可能要说上半天&a…

js(Dom+Bom)第五天(1)

JavaScript BOM介绍 概念 BOM&#xff08;Browser Object Model&#xff09;即浏览器对象模型。 本质&#xff1a; 通过对象抽象浏览器中的一些功能 例如&#xff1a;&#xff08;刷新页面&#xff0c;alert,confirm,pormpt,跳转 ...&#xff09;BOM顶级对象 window对象是js中…

第六节:深究事务的相关性质、隔离级别及对应的问题、死锁相关

一. 相关概念 前面系列中的章节的&#xff1a; 第二十二节: 以SQLServer为例介绍数据库自有的锁机制(共享锁、更新锁、排它锁等&#xff09;和事务隔离级别 介绍了各种锁以及事务的隔离级别&#xff0c;是从数据库的角度进行介绍的&#xff0c;本章节是通过EF Core为载体&…

js(Dom+Bom)第五天(2)

webAPI 01-事件监听 为什么要学事件监听 之前给元素注册事件的时候,同一个事件会被覆盖掉事件监听的本质 通过另外一种方式给元素注册事件, 同时可以解决同一个事件不会被覆盖掉.知识点-通过 on 方式给元素注册事件 之前注册事件的方式:事件源.onclick function() {}on是一种…

UIAutomator简介

简介 Android 4.3发布的时候包含了一种新的测试工具–uiautomator&#xff0c;uiautomator是用来做UI测试的。也就是普通的手工测试&#xff0c;点击每个控件元素 看看输出的结果是否符合预期。比如 登陆界面 分别输入正确和错误的用户名密码然后点击登陆按钮看看是否能否登陆以…