使用forEach和ES6实现tab切换的示例代码

本文主要介绍了使用forEach和ES6实现tab切换的示例代码，分享给大家，具体如下：

效果:

html代码:

  <ul class="nav">
        <!-- <li>
            <a href="">前端</a>
            <ul class="select">
                <li>就业班</li>
                <li>精品</li>
                <li>学院福利</li>
            </ul>
        </li>
        <li>
            <a href="">Python</a>

        </li>
        <li>
            <a href="">JavaEE</a>

        </li> -->
    </ul>

css代码：

        * {
            margin: 0;
            padding: 0;
        }

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

        li {
            width: 70px;
            list-style: none;
        }

        .nav {
            text-decoration: none;
            list-style: none;
        }

        .nav>li {
            background-color: lightsteelblue;
            padding: 10px 15px;
            text-align: center;
            float: left;
        }

js代码：

 <script src="../阶段四jquery/jquery编程/jquery.min.js"></script>
     <script>
        var arr1 = ['前端', 'Python', 'JavaEE'];
        var arr2 = ['就业班', '精品', '学院福利'];
        var nava = ``;
        var naul = ``;
        arr1.forEach(function(item) {
            console.log(item);
            nava += `<li><a href="">${item}</a><ul class=" rel="external nofollow" select"></ul></li> `;
            $(".nav").html(nava);

        });

        arr2.forEach(function(item) {
            console.log(item);
            naul += `<li>${item}</li>`;
            $(".select").html(naul);
        });

        $(".nav>li").children("ul").hide();

        $(".nav>li").mouseleave(function() {
            $(this).children("ul").hide();
        });

        $(".nav>li").mouseover(function() {
            $(this).children("ul").show();

        });
    </script>

到此这篇关于使用forEach和ES6实现tab切换的示例代码的文章就介绍到这了,更多相关forEach和ES6实现tab切换内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 使用jquery实现div的tab切换实例代码

    jQuery实现Tab切换 接触jQ不久以前的js代码来写的简单效果现在用jQ来写: HTML代码: 复制代码 代码如下: <div id="sidebar-tab"> <div id="tab-title"> <h3><span class="selected">最新评论</span><span>近期热评</span><span>随机文章</s

  • javascript实现tabs选项卡切换效果(自写原生js)

    javascript实现tabs选项卡切换效果(自写原生js)

    现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下:  html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</

  • javascript实现tab切换的四种方法

    javascript实现tab切换的四种方法

    tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } li{ list-style:

  • jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

    jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

    本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果.分享给大家供大家参考.具体如下: 这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写,另外还加入了圆角,都是参考以前学习的知识写的.期间使用了jquery-1.6.2.min.js框架库. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n

  • 原生js实现tab选项卡切换

    原生js实现tab选项卡切换

    本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下 1.html部分  <body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">时事</a></li> <li><a hre

  • jQuery版Tab标签切换

    jQuery版Tab标签切换

    鼠标移入Tab的时候会有一定的延时才会切换到相应的项,防止用户不经意的鼠标操作,点击相应的项也可以切换 效果图: 源代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3

  • 最简单的tab切换实例代码

    最简单的tab切换实例代码

    JS: $(".con").eq(0).show(); $(".btn span").click(function(){ var num =$(".btn span").index(this); $(".con").hide(); $(".con").eq(num).show().slblings().hide(); }) CSS: body { cursor:default; -webkit-text-s

  • 使用forEach和ES6实现tab切换的示例代码

    使用forEach和ES6实现tab切换的示例代码

    本文主要介绍了使用forEach和ES6实现tab切换的示例代码,分享给大家,具体如下: 效果: html代码: <ul class="nav"> <!-- <li> <a href="">前端</a> <ul class="select"> <li>就业班</li> <li>精品</li> <li>学院福利</li

  • React组件内事件传参实现tab切换的示例代码

    React组件内事件传参实现tab切换的示例代码

    本文介绍了React组件内事件传参实现tab切换的示例代码,分享给大家,具体如下: 组件内默认onClick事件触发函数actionClick, 是不带参数的, 不带参数的写法: 如onClick= { actionItem } 带参数的写法, onClick = { this.activateButton.bind(this, 0) } 下面是一个向组件内函数传递参数的小例子 需求: 在页面的底部, 有四个按钮, 负责切换内容, 当按钮被点击时, 变为激活状态, 其余按钮恢复到未激活状态 分析

  • layui点击导航栏刷新tab页的示例代码

    layui的tab也默认是切换,不会刷新,想要达到点击导航栏刷新tab的功能只需在tab.js文件中将autoRefresh: false,改为true. 以上这篇layui点击导航栏刷新tab页的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Android 实现无网络页面切换的示例代码

    Android 实现无网络页面切换的示例代码

    本文介绍了Android 实现无网络页面切换的示例代码,分享给大家,具体如下: 实现思路 需求是在无网络的时候显示特定的页面,想到要替换页面的地方,大多都是recyclerview或者第三方recyclerview这种需要显示数据的地方,因此决定替换掉页面中所有的recyclerview为无网络页面 实现过程 1 在BaseActivity中,当加载布局成功以后,通过id找到要替换的view,通过indexOfChild()方法,找到要替换的view的位置,再通过remove和add view来

  • python tkinter实现界面切换的示例代码

    跳转实现思路 主程序相当于桌子: import tkinter as tk root = tk.Tk() 而不同的Frame相当于不同的桌布: face1 = tk.Frame(root) face2 = tk.Frame(root) ... 每个界面采用类的方式定义各自的控件和函数,每个界面都建立在一个各自定义的Frame上,那么在实现跳转界面的效果时, 只需要调用tkinter.destroy()方法销毁旧界面,同时生成新界面的对象,即可实现切换. 而对于切换的过程中改变背景颜色和大小,可以

  • layui弹出框Tab选项卡的示例代码

    最近做一个项目,使用LAYUI,在界面上Z弹出一个界面A,A上有TAB选项卡,分别为界面B.C:B界面上有一个列表,双击败列表行时,要把数据回写到界面Z; 界面A上有提交按钮,选中B界面上列表某一条数据,界面A上点提交时,同样回写数据到Z: 实现:双击:B上实现双击方法,调用A上界面方法,再调用Z界面上方法: B界面上方法: function dbclick_select(row,index){ debugger; if(row == null){ var nodes=$("#TableSele

  • ASP.NET Core MVC 中实现中英文切换的示例代码

    哈喽..大家好 很久没有更新了,今天就来一篇最近开发用到的功能,那就是中英文切换,这个实际上也不是高大上,先说一下原理,在.NET Core框架中给我们提供了全球化的类,叫做Localization,其官方的文档地址传送门. 在我的项目中,我是这样操作的,你想用别的方式,也可以看文档自己去搞.这个已经不是什么新鲜的东西了,只是网上的实现有些问题,不容易明白. 我们无需任何Nuget包,因为它是在Microsoft.AspNetCore.Mvc.Localization中,那么我们直接在.NET

  • springboot多数据源配置及切换的示例代码详解

    注:本文的多数据源配置及切换的实现方法是,在框架中封装,具体项目中配置及使用,也适用于多模块项目 配置文件数据源读取 通过springboot的Envioment和Binder对象进行读取,无需手动声明DataSource的Bean yml数据源配置格式如下: spring: datasource: master: type: com.alibaba.druid.pool.DruidDataSource driverClassName: com.mysql.cj.jdbc.Driver url:

  • Java Selenium实现多窗口切换的示例代码

    在web应用中,常常会遇见点击某个链接会弹出一个新的窗口,或者是相互关联的web应用 ,这样要去操作新窗口中的元素,就需要主机切换到新窗口进行操作.WebDriver 提供了switchTo().window()方法可以实现在不同的窗口之间切换. 获取当前窗口浏览器句柄:driver.getWindowHandle(); 获取所有窗口的浏览器句柄到当前会话:driver.getWindowHandles(); 用于不同窗口的切换:switchTo().window(); 在页面操作过程中有时候点

  • JS封装的选项卡TAB切换效果示例

    JS封装的选项卡TAB切换效果示例

    本文实例讲述了JS封装的选项卡TAB切换效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>JS封装的选项卡TAB代码</title> <style type="text/css"> *{ padding:0; margin:0;}

随机推荐