tab栏切换效果

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .box {

            width: 500px;

            height: 400px;

            border: 1px solid #ccc;

            margin: 100px auto;

            overflow: hidden;

        }

        ul {

            width: 600px;

            height: 40px;

            margin-left: -1px;

            list-style: none;

        }

        li {

            float: left;

            width: 101px;

            height: 40px;

            text-align: center;

            font: 600 18px/40px "simsun";

            background-color: pink;

            cursor: pointer;

        }

        span {

            display: none;

            width: 500px;

            height: 360px;

            background-color: yellow;

            text-align: center;

            font: 700 150px/360px "simsun";

        }

        .show {

            display: block;

        }

        .current {

            background-color: yellow;

        }

    </style>

    <script>

        window.onload = function () {

            var boxArr = document.getElementsByClassName("box");

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

                fn(boxArr[i]);

            }

            function fn(ele){

                var liArr = ele.getElementsByTagName("li");

                var spanArr = ele.getElementsByTagName("span");

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

                    liArr[i].index = i;

                    liArr[i].onmouseover = function () {

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

                            liArr[j].className = "";

                            spanArr[j].className = "";

                        }

                        this.className = "current";

                        spanArr[this.index].className = "show";

                    }

                }

            }

        }

    </script>

</head>

<body>

    <div class="box">

        <ul>

            <li class="current">鞋子</li>

            <li>袜子</li>

            <li>帽子</li>

            <li>裤子</li>

            <li>裙子</li>

        </ul>

        <span class="show">鞋子</span>

        <span>袜子</span>

        <span>帽子</span>

        <span>裤子</span>

        <span>裙子</span>

    </div>

    <div class="box">

        <ul>

            <li class="current">鞋子</li>

            <li>袜子</li>

            <li>帽子</li>

            <li>裤子</li>

            <li>裙子</li>

        </ul>

        <span class="show">鞋子</span>

        <span>袜子</span>

        <span>帽子</span>

        <span>裤子</span>

        <span>裙子</span>

    </div>

    <div class="box">

        <ul>

            <li class="current">鞋子</li>

            <li>袜子</li>

            <li>帽子</li>

            <li>裤子</li>

            <li>裙子</li>

        </ul>

        <span class="show">鞋子</span>

        <span>袜子</span>

        <span>帽子</span>

        <span>裤子</span>

        <span>裙子</span>

    </div>

</body>

</html>

tab栏切换效果的更多相关文章

ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
tab栏切换效果案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
js 实现tab栏切换效果
效果图: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
tab栏切换效果运用案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JavaScript--tab栏切换效果
tab栏切换效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
jQuery带有定时器的tab栏切换
现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换淘宝的tab栏切换其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...
tab栏切换
最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...
JS实现 Tab栏切换案例
要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...
dataTable tab栏切换时错位解决办法
做后台管理类网站肯定要写列表,首选dataTable,功能强大最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

随机推荐

mui开发中获取单选按钮、复选框的值
js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); retur ...
Android 6.0 运行时权限处理完全解析（摘抄）
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/50709663: 本文出自:[张鸿洋的博客] 一.概述随着Android 6. ...
NF!=1
NF表示列数,不等于1表示列数不为1列
java代码(处理json串)
package test; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; public class ...
Android学习总结（十一）———— Adapter的使用
一.Adapter的基本概念 UI控件都是跟Adapter(适配器)打交道的,了解并学会使用这个Adapter很重要, Adapter是用来帮助填充数据的中间桥梁,简单点说就是:将各种数据以合适的形式 ...
快速生成导入亿级测试数据到sqlserver
如果采用insert into 循环一条一条插入速度比较慢可以先将数据插入临时表,然后在临时表数据量到达批量插入的行数时执行例如:目标表 (col1,col2,col3) --根据目标表结构复制一个 ...
Netbeans使用笔记
Netbeans 新建项目 A brand new project 选择"文件">"新建项目"以打开新建项目向导. 在向导中,选择 "C/C++ ...
OS X快捷键小技巧
退出command+Q,关分页Command+W,刷新Command+R,新开分页Command+T 全屏 ctrl+command+F 每个Mac使用者都知道点击下窗口左上角黄色圆形的按钮就可以最小 ...
var、let、const声明变量的区别
let和var声明变量的区别:1.let所声明的变量只在let命令所在的代码块内有效.(块级作用域) for(let i=0;i<10;i++){ // ... } console.log(i) ...
Java创建图片文件缩略图
public static void uploadImg(InputStream file, String filePath, String fileName, int widthdist, int ...

tab栏切换效果

tab栏切换效果的更多相关文章

随机推荐

热门专题