四、day02切换滑块
2024-05-13 01:52:05
tab切换：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>tab切换</title><style>*{margin: 0;padding: 0;}.selector{width: 400px;height: 200px;background-color: deepskyblue;border: 6px solid deepskyblue;}aside{width: 100px;height: 200px;float: left;}aside p{height: 50px;line-height: 50px;font-size: 20px;color: #fff;text-align: center;}aside p.now, aside p:hover{background-color: #fff;color: deepskyblue;cursor: pointer;}main{width: 300px;height: 200px;float: left;background-color: #fff;}main p{width: 94%;height: 50px;margin: 0 auto;line-height: 50px;box-sizing: border-box;border-bottom: 2px solid deepskyblue;text-indent: 20px;}main div{width: 94%;height: 150px;margin: 0 auto;display: none;}main div.dylj{background-color: tomato;display: block;}main div.xd{background-color: gold;}main div.zlj{background-color: hotpink;}main div.mbfx{background-color: greenyellow;}</style>
</head>
<body><div class="selector"><aside><p class="now">大娱乐家</p><p>小段</p><p>侏罗纪</p><p>末班飞行</p></aside><main><p class="title">娱乐至上</p><div class="dylj"></div><div class="xd"></div><div class="zlj"></div><div class="mbfx"></div></main></div>
</body>
<script>// 点击不同的选项卡，右侧的标题切换，右侧的内容块切换var ps = document.querySelectorAll("aside p");var pTitle = document.querySelector(".title");var ds = document.querySelectorAll("main div");var index = 0; //now的下标// 1.在标签内部添加任意属性来存储数据// 2.使用数组var arr = ["娱乐至上", "散落的音乐", "陪你看电影", "最后的目的地"];//添加点击事件for (var i=0; i<ps.length; i++){// 为每一个选项卡添加自定义属性 index下标ps[i].index = i;ps[i].onclick = function(){// 点击的就是显示的内容if (this.index === index){return;}// 修改nowps[index].className = "";this.className = "now";// 修改显示的div内容ds[index].style.display = 'none';ds[this.index].style.display = 'block';// 修改title的值pTitle.innerHTML = arr[this.index];// 修改index的值index = this.index;}}
</script>
</html>
滑块：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滑块</title><style>*{margin: 0;padding: 0;}nav{position: relative;height: 60px;line-height: 60px;color: #fff;background-color: #666;display: flex;justify-content: space-around;}p{z-index: 1;width: 80px;height: 60px;text-align: center;}.slider{position: absolute;width: 80px;height: 60px;background-color: rgba(255, 0, 0, .45);transition: .3s;}</style>
</head>
<body><nav><p>春节</p><p>元宵节</p><p>清明节</p><p>端午节</p><p>七夕节</p><p>中秋节</p><p>重阳节</p><p>冬至</p><p>除夕</p><div class="slider"></div></nav>
</body>
<script>// 获取节日标签var ps = document.querySelectorAll("p");var dSlider = document.querySelector(".slider");// 先把slider定位到第一个节日标签dSlider.style.left = ps[0].offsetLeft + 'px';// 为p标签添加鼠标移入事件for(var i=0; i<ps.length; i++){ps[i].onmouseenter = function(){dSlider.style.left = this.offsetLeft + 'px';}}
</script>
</html>
微博选项卡：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>微博选项卡</title><style>* {margin: 0;padding: 0;list-style: none;}.wrap {width: 320px;height: 568px;background-color: pink;box-shadow: 0 0 3px #111;margin: 0 auto;position: relative;}nav {text-align: center;height: 44px;line-height: 44px;background-color: aliceblue;border-bottom: 1px solid #333;}.window {width: 320px;height: 60px;position: relative;}.slider {width: 320px;height: 60px;background-color: antiquewhite;border-bottom: 1px solid #333;overflow-x: scroll;overflow-y: hidden;}.move {width: 720px;padding-right: 40px;}.move p {float: left;width: 80px;height: 60px;line-height: 60px;text-align: center;}.more {position: absolute;right: 0;top: 0;width: 40px;height: 60px;line-height: 60px;text-align: center;background-color: orange;}.alert{width: 320px;height: 568px;position: absolute;top: 0;left: 0;background-color: #ebebeb;z-index: 1;overflow: scroll;}.alert p{height: 40px;/* background-color: cyan; */box-sizing: border-box;padding: 10px;}.alert p span:nth-last-of-type(1){float: left;line-height: 20px;}.alert p span:nth-last-of-type(2){float: right;line-height: 20px;color: gold;}.alert div{box-sizing: border-box;padding: 10px;display: flex;flex-wrap: wrap;justify-content: space-between;}.alert div span{width: 66px;height: 40px;line-height: 40px;text-align: center;box-sizing: border-box;margin: 5px 0;font-size: 14px;}.alert .mine span{background-color: lightgray;position: relative;}.alert .mine span strong{position: absolute;left: -8px;top: -8px;border-radius: 50%;width: 16px;height: 16px;background-color: #666;color: #fff;line-height: 16px;text-align: center;font-size: 12px;}.alert .tj span{border: 1px dashed black;}</style>
</head>
<body><div class="wrap"><nav>微博</nav><div class="window"><div class="more">+</div><div class="slider"><div class="move"><p>热门</p></div></div></div><div class="alert"><p><span>完成</span><span>我的频道</span></p><div class="mine"><span>热门</span><!-- <span><em>热门</em><strong>×</strong></span> --></div><p><span>推荐频道</span></p><div class="tj"><!-- <span>热门</span> --></div></div></div>
</body>
<script>//数据var pds = ["同城","抗疫","财经","读书","摄影","电影","体育","综艺","时尚","星座","故事","房产","家居","萌宠","科普","动漫","艺术","美妆","音乐","法律","设计","历史","瘦身","游戏","校园","抽奖","育儿","婚恋","吃鸡","王者","教育","养生"];var dTj = document.querySelector(".tj");var dMine = document.querySelector(".mine");// 将数据显示在 推荐 模块中function showDataInTj(){//生成 span 放到 d.tj 里for(var i=0; i<pds.length; i++){createSpan(pds[i]);}}showDataInTj();// var span = document.createElement("span");// span.innerHTML = '+' + info;// dTj.appendChild(span);// 生成 d.tj 的spanfunction createSpan(info){var span = document.createElement("span");span.innerHTML = '+' + info;dTj.appendChild(span);//点击事件span.onclick = function(){// 1.在d.mine里生成新的标签var ss = document.createElement("span");ss.innerHTML = `<em>${this.innerHTML.substr(1)}</em><strong>×</strong>`;dMine.appendChild(ss);// 获取strong标签，添加点击事件var strong = ss.querySelector("strong");strong.onclick = del;// 2.让自己消失掉dTj.removeChild(this);}}// 点击strong的×function del(){// 在 d.tj 里生成对应的标签var str = this.previousElementSibling.innerHTML; //previousElementSibling上一个节点 nextElementSibling下一个节点createSpan(str);// 把自己删掉dMine.removeChild(this.parentNode);}</script>
</html>
四、day02切换滑块相关推荐
- datavideo切换台说明书_【新品发布】datavideo SE-650 高清四通道切换台
还在为音乐演唱会的拍摄而烦恼吗? 或者为体育比赛的多机位发愁? 或者为微课.优课.慕课制作而焦头烂额? 大部分用户对多机位的恐惧来源于相关产品令人发指的复杂和专业性,面对满眼的键盘会有无从下手之感,很 ...
- 普中A6开发版——XPT2046四引脚切换测量（含详细教程以及原理图等资料）
文章目录 一.简介 二.原理图以及手册 三.接线 四.选择数码管芯片原理讲解 五.代码 一.简介 本文介绍了XPT2046的使用方法以及普中A6开发版的接线等,并从原理图以及手册中摘选了详细的介绍,充 ...
- python自动化测试selenium（四）切换页面、切换窗口
一.切换页面 如果定位元素失败(抛出NoSuchElementException),调查网页源代码,发现这个元素位于一个frame或iframe标记的元素下的子网页(html标记)里,那么此时需要切换 ...
- 仿新浪公益四色主题切换文章模板（齐博V7模板）
=================================== 模板名称:仿新浪公益四色切换风格模板 程序内核:齐博V7 模板内容:首页 文章模型列表 内容 模板制作:奋斗的十二 技术支持:w ...
- Selenium之多窗口句柄的切换
前言 有些页面的链接打开后,会重新打开一个窗口,对于这种情况,想在新页面上操作,就得先切换窗口了.获取窗口的唯一标识用句柄表示,所以只需要切换句柄,我们就能在多个页面上灵活自如的操作了. 一.认识多窗 ...
- qscrollbar 固定滑块大小_五金模具设计：通用滑块结构形式！模具滑块的设计标准！值得收藏...
一. 滑块通用结构形式 1. 图(1)是常用的滑块结构形式;如滑块尺寸L较小,或当采用图(1)的形式,模板在滑块W方向尺寸有干涉时,可选用图(2)的结构形式;采用图(4)所示的结构形式时,要经专案主管 ...
- qscrollbar 固定滑块大小_第32章：五金冲压模具设计:通用滑块结构形式！新手必备资料！...
点击上方"pressCAD五金模具设计"关注我们吧! 一. 滑块通用结构形式 1. 图(1)是常用的滑块结构形式;如滑块尺寸L较小,或当采用图(1)的形式,模板在滑块W方向尺寸有干 ...
- linux命令进入用户模式,linux怎么切换到root用户模式
默认安装完成之后我们是用当前用户权限的进入linux系统的,但是很多操作我们是需要用到root账户权限才可以操作. 首先进入控制台的命令是crtl+Alt+T. 默认安装完成之后并不知道root用户的 ...
- bootstrap轮播图 原点变为方块_JS实现无缝切换轮播图(自动+手动)
一.背景 说起轮播图,大家应该都不陌生,各大购物网站和面试题里都能看到它的身影. 实现上也并不困难,而写这篇文章是想整理一下自己心血来潮写的代码,以及实现过程中的一些思考,大家也可以顺便复习巩固一下. ...
- mac下多个php版本快速切换的方法
php是为了快速构建一个web页面而迅速被大家广为接受的开源语言,通过不断发展已经有了很多的php开源系统,满足了目前大部分用户的站点需求.1995年初php诞生到现在已经存在多个版本,并且每个版本都 ...
最新文章
- Lucene.net: the main concepts
- python爬虫教程入门-零基础入门Python爬虫不知道怎么学？这是入门的完整教程
- 在你的 Rails App 中开启 ETag 加速页面载入同时节省资源
- DM8168学习--USB的over-current 问题总结
- 庆祝51CTO六周年：资源牛人有奖比拼，生日当天疯狂送豆！(已结束)
- oracle10g rac升级到10.2.0.5
- Redis 如何实现主从复制
- springboot整合 beatlsql
- html期末作品,走完HTML和CSS，进军期末
- 软考高级系统架构师论文，到底该如何写
- 合取范式 (CNF)
- 戴尔服务器r710主板电池位置,戴尔R710内部结构1
- 解决同一路由，不同参数报Navigating to current location ***** is not allowed 问题
- IDC数据中心机房气体灭火系统知识
- 5个可用提高Godaddy主机速度的第三方CDN加速服务商
- 如何在IDEA中创建一个项目
- 另眼看iPad发布。
- 十款入门级微信小程序源码分享之三
- mklink和junction 详解
- java画虚线_画流动虚线框(java) | 学步园