首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场

切换

作者头像
天天_哥
发布于 2018-09-29 07:04:20
发布于 2018-09-29 07:04:20
1.5K00
代码可运行
举报
文章被收录于专栏:天天天天
运行总次数:0
代码可运行

1.结构

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="table">
    <div class="tab">
        <ul id="tab">
            <li class="current">账号登录</li>
            <li>扫码登录</li>
        </ul>
    </div>
    <div class="tab_content" id="tab_content">
        <div class="one">
            <p><input type="text"/></p>
            <p><input type="password"/></p>
        </div>
        <div class="two">
            ![](images/01.png)
        </div>
    </div>
</div>

2.样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
        *{margin:0;padding:0}
        .table{
            margin-left: auto;
            margin-right: auto;
            margin-top: 200px;
            width:350px;
            border:1px solid #333;
            text-align: center;
        }
        ul{
            list-style: none;
        }
        li{
            display: inline-block;
            line-height: 50px;
            cursor: pointer;
        }
        .tab{
            border-bottom: 1px solid #333;
        }
        .tab_content{
            position: relative;
            width:350px;
            height:200px;
        }
        .tab_content>div{
            position: absolute;
            width:350px;
            height:200px;
        }
        .two{
            display: none;
        }
        .one input{
            width:280px;
            height:30px;
            margin-top: 20px;
        }
        .current{
            color:orange;
        }
    </style>

3.行为

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
    var tabs=document.getElementById("tab").getElementsByTagName("li");
    var contents = document.getElementById("tab_content").children;
    //对标签li遍历实现点击事件,
    for(var i=0;i<tabs.length;i++){
    /*用value属性记录被点击的li的下标i*/
        tabs[i].value=i;
        tabs[i].onclick = function(){
            //对应的增加current的类,兄弟元素移除current的类;
            var siblings = this.previousElementSibling || this.nextElementSibling;
            siblings.className="";
            this.className="current";
            //对div遍历实现所有的div的隐藏,
            for(var m=0;m<contents.length;m++){
                contents[m].style.display="none";
            }
            //this的value值,找到点击li的下标并传给div;
            contents[this.value].style.display="block";
        }
    }
</script>

4.分析

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1.代码结构写好;
2.在对li进行遍历的时候,要给每个li给一个记录index的标记;
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.10.10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
一些经典案例
案例一:(实现效果,鼠标移动到哪个菜单上,哪个菜单会显示二级菜单,移开会收回。) 案例二:tab栏(选项卡) 鼠标滑过,显示对应的特殊样式,下面的内容替换为需要的内容。 和无缝滚动一样是专有名词。 e
小闫同学啊
2019/07/18
9610
一些经典案例
如何用原生 javascript 写一个选项卡?
当时学习jquery的时候,是以写一个 选项卡 为开始的。当然,用jq写是非常简单的。
FungLeo
2022/11/28
5200
情人节撸一个表白页面
趁此单身汪伤心之日,作为一名前端程序猿的我也按捺不住了,撸个表白页面送给广大想表白的人儿。话不多说,先看效果(网页地址):
小皮咖
2019/11/05
5.1K0
情人节撸一个表白页面
jQuery小练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="styleshee
小闫同学啊
2019/07/18
4380
jQuery小练习
电商左侧商品分类菜单实现
电商左侧商品分类菜单实现 无论是pc端还是手机端,都有类似左侧分类,点击后右侧切换内容的功能页面。 要想实现这个功能,首先第一步是要掌握左右布局的方法。 左右布局 推荐使用flex弹性布局 .parent { display: flex; } .left { width: 200px; height: 100%; background-color: red; } .right { display: flex; flex: 1; height: 1
我的小熊不见了丶
2019/10/14
2.6K0
JavaScript案例:tab栏切换
案例分析 Tab栏切换有2个大的模块 上面的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想)修改类名的方式 下面的模块内容,会跟随上面的选项卡变化,所以下面模块变化写到点击事件里面 规律:下面的模块显示内容和上面的选项卡一一对应,相匹配。 核心思路:给上面的tab_list里面的所有小li添加自定义属性,属性值从0开始编号。 当我们点击tab_list里面的某个小li,让tab_con里面对应序号的内容显示,其余隐藏(排他思想) 代码实现 <!DOCTYPE html> <html
岳泽以
2022/10/26
2.1K0
JavaScript案例:tab栏切换
Web前端知识(三)
font-size、font-family、font-style、font-weight
软件小生活
2021/09/10
1.6K0
HTML5小游戏之见缝插针
今天给大家带来的就是一款叫做《见缝插针》的游戏。有空你就往里插,直到你无处可插!看你能过多少关!
全栈程序员站长
2022/07/15
1.2K0
php 生成订单号201807205598981
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/112386.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/08
8280
JavaScript事件(二)
例题顺序: 1.子菜单下拉 2.图片轮播 3.选项卡效果 4.进度条制作 5.滑动效果 6.滚动固定效果 1.子菜单下拉 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta ht
二十三年蝉
2018/02/27
1.3K0
从零开始摸索VUE,配合Golang搭建导航网站(十六.CSS动画初探)
上篇完善了一下一些CSS的问题。今天想锦上添花学习加点特效,很不幸最初想模仿的名叫馨客栈的网站倒闭了。网络域名过期了,只能根据最初的印象做了。等再找找其他的网站再继续模仿其他优秀的细节~
玖柒的小窝
2021/11/16
7150
从零开始摸索VUE,配合Golang搭建导航网站(十六.CSS动画初探)
20.DOM
定义 文档对象模型(Document Object Model)是一种用于HTML和XML文档的编程接口。 查找元素 1.直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签
zhang_derek
2018/04/11
7860
写一个问卷调查的功能(熟悉一下Array数组的操作以及对Radio的使用)
首先感谢这个大神的css和js,让我得以实现这个效果,我只是将基本的js实现了,大部分的工作都是这个朋友完成的,他将效果实现的很完美,我只是拿过来将功能完善了一下,原文的可选项很多,但是为了快速实现js的结果运算,我将很多的代码都删除了,最后将结果呈现出来,最后再次感谢这位朋友!
何处锦绣不灰堆
2020/05/29
8440
写一个问卷调查的功能(熟悉一下Array数组的操作以及对Radio的使用)
常见选项卡内容切换+折叠+展开效果实现
1.选项卡效果预览 2.源码与简要说明 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5
小蔚
2019/09/11
3.7K0
简单的注册模块表单验证处理
表单具有 onsubmit = "return check()"行为,处理验证情况
书童小二
2018/09/03
3.5K0
简单的注册模块表单验证处理
JavaScript离别之作——HTML元素操作
document对象提供了一些用于查找元素的方法,利用这些方法可以根据元素的id、name和class属性以及标签名称的方式获取操作的元素。
全栈程序员站长
2022/09/09
1.2K0
JavaScript离别之作——HTML元素操作
前端路由相关实现
版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/55255056
空空云
2018/09/27
6340
前端路由相关实现
无聊的人用JS实现了一个简单的打地鼠游戏
如果点击颜色比较深的那个(俗称坏老鼠),将扣分50;如果点击颜色比较浅的那个(俗称好老鼠),将得分100
书童小二
2018/09/03
1.9K0
无聊的人用JS实现了一个简单的打地鼠游戏
学习js在线html(富文本)编辑器
你要的是所见即所得HTML编辑器,简单来说需要几个基本步骤: 1,需要一个可以编辑同时又可显效果的编辑框。textarea不行,它只能用来输入纯文本,不能显示颜色、斜体之类的文字样式,就像记事本。 你可以使用iframe来实现,修改iframe的designMode属性使其可以被编辑。 <iframe id="myEditer" width="100%" height="150px"></iframe> <script>myEditer.document.designMode = 'on';</scri
deepcc
2018/05/16
20.5K0
04 . 前端之JQuery
JQuery简介 # 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 # 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便
iginkgo18
2020/09/27
3.7K0
相关推荐
一些经典案例
更多 >
LV.1
这个人很懒,什么都没有留下~
交个朋友
加入前端学习入门群
前端基础系统教学 经验分享避坑指南
加入腾讯云技术交流站
前端技术前沿探索 云开发实战案例分享
加入云开发企业交流群
企业云开发实战交流 探讨技术架构优化
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档