JS-制作网页特效——选项卡效果（水平，点击）

时间：2022-03-19 22:15:01

//总结：这个样式的思维很重要，以前刚开始做，想的都是，怎么获取到自己点击的是哪一个li，然后给他以对应的div样式。后来发现难点是，怎么找到另外两个没有被点击的li和他们对应的div。把他们的样式去掉。现在恍然，这种“打扫完屋子再请客”的思维，先把所有的都去掉，再想给谁添加就给谁添加就可以了呀！看来以后，想拿起什么东西前，得先学会把该放下的放下。不然，难为的只有自己。

<!DOCTYPE html>
<html>

<head>

<meta name="author" content"郭菊锋,702004176@qq.com">
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
color: black;
}

li {
list-style: none;
}

.tapWrap {
border: 3px dotted #4169E1;
width: 25%;
margin: 10px auto;
padding: 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

ul.tapHeadWrap li {
width: 75px;
height: 45px;
line-height: 45px;
text-align: center;
display: inline-block;
border: 2px solid #ccc;
background-color: white;
}

.tapWrap div {
width: 94%;
padding: 10px;
margin-top: -4px;
border: 2px solid #ccc;
}
.tapWrap>ul li:hover,
.tapWrap div {
border-top: 3px solid #DC143C;
}
.tapWrap div li{
margin: 5px 0;
}
.tapWrap div a:hover{
text-decoration: underline;
color: #DC143C;
}
.tapWrap>ul li:hover,
.tapWrap div a:hover {
cursor: pointer;
}

ul.tapHeadWrap li.on {
border-top: 3px solid #DC143C;
border-bottom: 7px solid #fff;
}
.hide{
display: none;
}
</style>
</head>

<body>
<div class="tapWrap" id="tapWrap">
<ul id="tapHeadWrap" class="tapHeadWrap">
<li class="on">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
<ul>
<li>
<a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a>
</li>
<li>
<a href="javascript:;">200万内购五环三居 140万安家东三环</a>
</li>
<li>
<a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a>
</li>
<li>
<a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a>
</li>
</ul>
</div>
<div class="hide">
<ul>
<li>
<a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a>
</li>
<li>
<a href="javascript:;">经典清新简欧哀家 90平老房焕发新生</a>
</li>
<li>
<a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a>
</li>
<li>
<a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a>
</li>
</ul>
</div>
<div class="hide">
<ul>
<li>
<a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a>
</li>
<li>
<a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a>
</li>
<li>
<a href="javascript:;">皇城根小学学区仅260万 121平70万抛！</a>
</li>
<li>
<a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a>
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var tapDivWrap = document.getElementById('tapWrap');
var tapDiv = tapDivWrap.getElementsByTagName('div');
// alert(tapDiv.length)
var tapUl = document.getElementById('tapHeadWrap');
var tapLi = tapUl.getElementsByTagName('li');//此例中：利用tagName的方式获取下边的标签更方便
// alert(tapLi.length)
for(var i=0;i<tapLi.length;i++){
tapLi[i].index = i;//对三个li进行重新的编号，现在li[0,1,2]分别对应是0,1,2了，。具体原理明白就是说不出来，反正就是死记硬背知道这种方式，是用来对一个获取到的数组进行重新从零开始编号就对了，以方便下边获取他的下标索引对齐进行对应的操作
tapLi[i].onclick = function(){
for(var j = 0;j<tapLi.length;j++){//超出tapLi的长度就是超出了taoLi[i]中的值，会有未定义的错误出现
tapLi[j].className = "";//这里的tapLi[j]==tapLi[i]的值吗？不等于，这里的作用是让j【也就是从0-2，因为j小于li的长度，j又是从0开始的，所以j就是在0,1,2这三个数上面循环一遍】

//alert(tapLi[j].index);//由此调试循环得出，j分别是0,1,2.对应到html中，就是第一个li、第二个li、第三个li的className都成了0.这样先全部清除掉，到了下边j循环外，this.className处，再把点击的对应的li加上className。
tapDiv[j].className = "hide";//让所有的都先隐藏

tapDiv[j].style.display = 'none';//对应的这里也就不能再用className了，而要改成style，上一行的className就要删掉
}

//j循环的外边
this.className = "on";//this代指tapLi[i]，当前所点击的li，给他添加类名
tapDiv[this.index].className = "";//this.index=tapLi[i].index,具体作用下边alert做调试得知，就是得到一个对应你点击的li的下标（即一个数字），这个数字再搭配tapDiv[]的方式，自然就是获取和当前li对应的div了，因为div的下标也是从0开始共三个数的。这样，给当前被点击li对应的div空类名，去除掉j循环中添加在他身上的hide枷锁，他就得意重见天日了！

//这里最后把className忘记了，害得我调试了半天。记得思维不能忘，就是通过className来更改他的css样式，或者也可以对应上面j循环里，添加隐藏样式那地方（绿色位置）直接更改css样式:如下
tapDiv[this.index].style.display = 'block';

//alert(this.index);//调试：得到的是当前被点击的li的下标

　　　　}
　　}
}
</script>

<!--清爽js代码如下-->

 <script type="text/javascript">

         window.onload = function() {

             var tapDivWrap = document.getElementById('tapWrap');

             var tapDiv = tapDivWrap.getElementsByTagName('div');

             var tapUl = document.getElementById('tapHeadWrap');

             var tapLi = tapUl.getElementsByTagName('li');

             for(var i = 0; i < tapLi.length; i++) {

                 tapLi[i].index = i;

                 tapLi[i].onclick = function() {

                     for(var j = 0; j < tapLi.length; j++) {

                         tapLi[j].className = "";

                         tapDiv[j].className = "tapHideDiv";

                     }

                     this.className = "tapActiveLi";

                     tapDiv[this.index].className = "";

                 }

             }

         }

     </script>

</html>

ul li {
width: 75px;
height: 45px;
line-height: 45px;
text-align: center;
/*padding: 5px 10px;*/
border: 2px solid #ccc;
background-color: white;
}

.tapWrap>ul li:hover {
border-bottom: none;
cursor: pointer;
}

.tapWrap div {
width: 50%;
padding: 10px;
margin-top: -3px;
/*display: inline-block;*/
border: 1px solid #4169E1;
border-top: 3px solid #DC143C;
}

.tapWrap>ul li{
display: inline-block;
}

.tapWrap>ul li:hover,
.tapWrap div:hover{
border-top: 3px solid #DC143C;
}
.on {
border-top: 3px solid #DC143C;
border-bottom: 5px solid #fff;
}
.hide{
display: none;
}
-->

JS-制作网页特效——选项卡效果（水平，点击）的更多相关文章

  1. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  2. &num;3使用html&plus;css&plus;js制作网页 番外篇 使用python flask 框架 &lpar;I&rpar;

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

  3. &num;3使用html&plus;css&plus;js制作网页 制作登录网页

    #3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...

  4. &num;3使用html&plus;css&plus;js制作网页 番外篇 使用python flask 框架 &lpar;II&rpar;

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  5. &num;3使用html&plus;css&plus;js制作网页 番外篇 制作接收php

    使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...

  6. 用js和css实现选项卡效果&plus;jq&lpar;2019-10-09&rpar;

    1效果图: 2代码: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. 利用Javascript制作网页特效（时间特效）

    在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...

  8. 用js制作的几个效果

    一,表格光柱效果(奇偶行不同颜色,鼠标移上变色) <html xmlns="http://www.w3.org/1999/xhtml"><head>< ...

  9. js实现网页tab选项卡切换效果

    <style> *{margin:0;padding:0;} body{font-size:14px;font-family:"Microsoft YaHei";} u ...

随机推荐

  1. PGPool 配置错误定位 s&lowbar;do&lowbar;auth&colon; expecting R got E

    自从按照教程 http://www.pgpool.net/docs/latest/pgpool-zh_cn.html#hba配置好PGPool以后,每次启动 pgpool -c -n -D 都报 s_ ...

  2. GET方法和POST方法

    package com.hanqi.cunchu; import android.app.ProgressDialog; import android.support.v7.app.AppCompat ...

  3. Ubuntu 16&period;04 TensorFlow CPU 版本安装

    1.下载Anaconda,官方网站.我下载的时Python 2.7 64bit版本: 2.安装执行命令     bash Anaconda2-4.2.0-Linux-x86_64.sh 设置好目录后等 ...

  4. 持续集成环境（Gitlab&plus;jenkins&plus;shell）

    一.搭建gitlab ps:不是这方面的专家,主要还是一键式安装为主. 1.进入官网:https://about.gitlab.com/gitlab-com/ 2.选择自己的操作系统:我这边选择的ub ...

  5. &lbrack;置顶&rsqb; 【IOS】IOS7 UI适配

    昨天下了把手机升级成了IOS7 正式版,然后下了最新的xocde5.  试着编译了一下刚刚完成的几个应用,还好问题不大,半个小时的时间都适配好了,然后改了下几个新出现的warning.过几天等空了,要 ...

  6. 对于Netty的十一个疑问&lpar;转&rpar;

    [说明]本文原载于码农 IO(manong.io)官方微信 developerWorks,转载.引用请注明出处及作者. 1．Netty 是什么? Netty 是一个基于 JAVA NIO 类库的异步通 ...

  7. QML与Qt C&plus;&plus; 交互机制探讨与总结

    介绍 QML和 C++对象可以通过,signals,slots和 属性修改进行交互.对于一个C++对象,任何数据都可以通过Qt的 Meta-Object System暴露给QML(何总方法,后面介绍) ...

  8. 如何找出Xcode中不同版本Swift的路径

    我们知道Xcode中可能包含不知一个Swift的版本,那么我们如何找到它们对应的路径呢? 熟悉unix shell命令的童鞋都知道有一个find指令,在我们已知Xcode路径时,我们可以在其中找到Sw ...

  9. HR&lowbar;Minimum Swaps 2

    源代码超时 看了评论区改用了字典序列. #!/bin/python3 import math import os import random import re import sys # Comple ...

  10. 在 CentOS7 上安装 zookeeper-3&period;5&period;2 服务

    [root@centos-linux src]# pwd /usr/local/src # 1.创建 /usr/local/src/zookeeper 文件夹 [root@centos-linux s ...

相关文章