js写选项卡

最新推荐文章于 2022-08-12 16:44:00 发布
最新推荐文章于 2022-08-12 16:44:00 发布
阅读量483 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/datuzidppd5556/article/details/98996522
版权

js写选项卡

<!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>
    <style>
        a {
            text-decoration: none;
        }

        .nav {
            width: 360px;
            height: 36px;
            line-height: 36px;
            border: 1px solid #ccc;
        }

        .nav span {
            font-size: 16px;
            display: inline-block;
            padding-left: 10px;
            padding-right: 10px;
        }

        .active {
            height: 34px;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            border-top: 3px solid #FF8400;
            border-bottom: 1px solid #fff;
            line-height: 32px;
            position: relative;
            margin-top: -1px;
        }

        .zhibo {
            height: 30px;
            width: 360px;
            line-height: 30px;
            font-size: 12px;
            margin-bottom: 4px;
        }

        .pic {
            width: 360px;
            height: 97px;
            margin-bottom: 10px;
        }

        .picson {
            width: 105px;
            height: 93px;
            float: left;
        }

        .pic .picson a img {
            width: 105px;
            height: 70px;
            display: block;
           
        }

        .foot {
            height: 20px;
            width: 105px;
            font-size: 12px;
            color: #fff;
            background-color: black;
            display: block;
        }

        .pic ul {
            text-decoration: none;
        }

        .pic ul li {
            float: right;
        }

        ul li span {
            line-height: 25px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="nav">
            <span class="active">体育</span>
            <span>NBA</span>
            <span>体育视频</span>
        </div>

        <div class="divs" style="display: block">
            <div class="zhibo">
                <span>0直播</span>
                <span>彩票</span>
                <span>高清图</span>
                <span>中超</span>
                <span>英超</span>
                <span>西甲</span>
                <span>欧冠</span>
                <span>中国篮球</span>

            </div>

            <div class="pic">
                <div class="picson">
                    <a href=""><img src="./image/新浪_03.png" alt=""></a>
                    <span class="foot">足球少年养成番外</span>
                </div>
                <ul>
                    <li>
                        <a href=""><img src="./image/xl_07.png" alt=""></a>
                        <span>中超前瞻，恒大国安，两强相遇</span>
                    </li>
                    <li>
                        <a href=""><img src="./image/xl_07.png" alt=""></a>
                        <span>中超前瞻，恒大国安，两强相遇</span>
                    </li>
                    <li>
                        <a href=""><img src="./image/xl_07.png" alt=""></a>
                        <span>中超前瞻，恒大国安，两强相遇</span>
                    </li>
                    <li>
                        <a href=""><img src="./image/xl_07.png" alt=""></a>
                        <span>中超前瞻，恒大国安，两强相遇</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="divs">
            <div class="zhibo">
                <span>1直播</span>
                <span>彩票</span>
                <span>高清图</span>
                <span>中超</span>
                <span>英超</span>
                <span>西甲</span>
                <span>欧冠</span>
                <span>中国篮球</span>

            </div>

            <div class="pic">
                <div class="picson">
                    <a href=""><img src="./image/新浪_03.png" alt=""></a>
                    <span class="foot">足球少年养成番外</span>
                </div>
                <ul>
                    <li>
                        <a href=""><img src="./image/xl_07.png" alt=""></a>
                        <span>中超前瞻，恒大国安，两强相遇</span>
                    </li>
                    <li>
                        <a href=""><img src="./image/xl_07.png" alt=""></a>
                        <span>中超前瞻，恒大国安，两强相遇</span>
                    </li>
                    <li>
                        <a href=""><img src="./image/xl_07.png" alt=""></a>
                        <span>中超前瞻，恒大国安，两强相遇</span>
                    </li>
                    <li>
                        <a href=""><img src="./image/xl_07.png" alt=""></a>
                        <span>中超前瞻，恒大国安，两强相遇</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="divs">
            <div class="zhibo">
                <span>2直播</span>
                <span>彩票</span>
                <span>高清图</span>
                <span>中超</span>
                <span>英超</span>
                <span>西甲</span>
                <span>欧冠</span>
                <span>中国篮球</span>

            </div>

            <div class="pic">
                <div class="picson">
                    <a href=""><img src="./image/新浪_03.png" alt=""></a>
                    <span class="foot">足球少年养成番外</span>
                </div>
                <ul>
                    <li>
                        <a href=""><img src="./image/xl_07.png" alt=""></a>
                        <span>中超前瞻，恒大国安，两强相遇</span>
                    </li>
                    <li>
                        <a href=""><img src="./image/xl_07.png" alt=""></a>
                        <span>中超前瞻，恒大国安，两强相遇</span>
                    </li>
                    <li>
                        <a href=""><img src="./image/xl_07.png" alt=""></a>
                        <span>中超前瞻，恒大国安，两强相遇</span>
                    </li>
                    <li>
                        <a href=""><img src="./image/xl_07.png" alt=""></a>
                        <span>中超前瞻，恒大国安，两强相遇</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        var navs = document.getElementsByClassName("nav");
        var sport = navs[0].getElementsByTagName("span");
        var divs = document.getElementsByClassName("divs");
        for (i=0;i<sport.length;i++){
            sport[i].index = i;
            sport[i].onmouseover= function(){
                for (i=0;i<sport.length;i++){
                    sport[i].className = "";
                    divs[i].style.display = "none";
                }
                this.className = "active";
                divs[this.index].style.display = "block";
            }
        }
    </script>
</body>

</html>

原理比较简单，附上运行结果（这是模仿着写的）：
在这里插入图片描述

进阶的小牛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android Webview JsBridge jar包
07-28
WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁，用作者的话来说就是实现java（ios为oc）和js的互相调用的桥梁。替代了WebView的自带的JavascriptInterface的接口，使得我们的开发更加灵活和安全。
用JS实现选项卡
01-19
本文实例为大家分享了JS实现选项卡的具体代码，供大家参考，具体内容如下 案例描述 在浏览器中显示一个选项卡界面，头部为1、2、3、4、5。点击头部任意一个数字，都在下方显示出不同的信息，并且鼠标停留在任意一个...
JSbridge使用 说明
板砖工KO水泥匠
03-28 1693
JSbridge H5页面说明 git地址：https://github.com/wangjiaojiao77/JsBridge 参考学习链接：http://www.imooc.com/article/23258 IOS demo链接：http://demo.yichaowang.bevateachers.com/js_bridge/jsbridge/ios.html Android demo链接...
初识JSBridge：从原理到使用（android、ios、js三端互通的工具）
qq_26780317的博客
08-12 4136
初识JSBridge：从原理到使用
JsBridge交互框架的使用
lk2021991的博客
01-07 2698
                                   JsBridge交互框架的使用 现在很多App都采用了混合开发，对于展示性强的界面，可以用H5去实现；功能性强的的可以在用native实现。在混合开发中可以说native和JS进行交互肯定是要涉及到的，当然如果你们项目不是混合开发，某些地方只是需要展示一下H5界面即可，也就涉及不到这块。说到交互，虽然Android系统为我们提...
JsBridge的使用
AfinalStone的专栏
03-22 1345
Android之利用JSBridge库实现Html，JavaScript与Android的所有交互 JsBridge使用和原理 Android JSBridge的原理与实现 Android中JSBridge的原理与实现
原生js实现选项卡功能
11-28
原生js选项卡写法</title> <style> #div1 div{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;} .active{background: red;} </style> [removed] [removed]=function...
js实现选项卡效果
11-21
本文实例为大家分享了js实现选项卡效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <title></title> </head> [removed] [removed]=function(){ var ...
js选项卡的实现方法
10-24
主要介绍了js选项卡的实现方法,实例分析了js选项卡的实现思路及html+css布局与js功能技巧,非常具有实用价值,需要的朋友可以参考下
js实现简单选项卡制作
10-14
主要为大家详细介绍了js实现简单选项卡制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android 优秀框架整理
热门推荐
黄孝果的博客
01-11 4万+
程序员界有个神奇的网站，那就是github，这个网站集合了一大批优秀的开源框架，极大地节省了开发者开发的时间，在这里我进行了一下整理，这样可以使我们在使用到时快速的查找到，希望对大家有所帮助！ 1. Retrofit　　 一句话介绍：Retrofit是一款类型安全的网络框架，基于HTTP协议，服务于Android和java语言 上榜理由：Retrofit以21.8k的stars量雄踞gith
QQ空间触屏登录加密JS
布衣博客
02-03 1万+
var $ = window.Simple = function(a) { return typeof(a) == "string" ? document.getElementById(a) : a};$.cookie = { get: function(b) { var a = document.cookie.match(new RegExp("(^| )" + b + "=([^;]*)(;|
Android与JS交互篇--JSBridge的使用
LIUW的博客
03-07 1万+
在android日常开发中，大家或多或少都会碰到原生嵌套web页面，大家可以使用传统的方式实现Native与JS的交互，这里就不多介绍了，现在我们简单介绍下网上目前比较流行的已经封装好的框架JsBridge。可参考官网github地址：点击打开链接先看下接下来将要实现的效果图：一、JsBridge的基本概念Android4.4以前，谷歌的webview存在安全漏洞，网站可以通过js注入就可以随便拿...
jsBridge实现android和js交互时遇到的问题总结
lutao2599的博客
06-29 1056
项目中需要安卓原生和js进行相互通信，使用的是github上星级比较高的jsBridge；按照它的文档写到项目中，但是注册js的方法一直不执行 然后就去github上，看有人遇到过这个问题没！偶然发现一条网友提出的，给了我启发 我就把项目中的 mWebView.setWebViewClient这行代码注释，运行了下果然可以了。虽然不知道什么原因，不过确实解决了我的问题 ...
H5与Native交互之JSBridge技术
weixin_33889665的博客
07-26 353
做过混合开发的很多人都知道Ionic和PhoneGap之类的框架，这些框架在web基础上包了一层Native，然后通过Bridge技术使得js可以调用视频、位置、音频等功能。本文就是介绍这层Bridge的交互原理，通过阅读本文你可以了解到js与ios及android底层的通讯原理及JSBridge的封装技术及调试方法。 一、原理篇 下面分...
JSBridge实战
weixin_33858336的博客
11-01 461
前言 H5 VS Native 一直是前端技术界争执不下的话题。react、vue等技术栈引领着纯H5开发，rn、week则倡导原生体验。但在项目实战中，经常会选择一个中立的方案：混合开发。大众称呼：Hybrid。 本人目前从事新闻类产品研发，对于大家来讲，就是熟知的如今日头条、百度新闻、网易新闻等。在产品设计初期，考虑到一些实现难易程度问题（如新闻详情页，图文混排，NA实现起来不如H5这样自如）...
android的jsBridge的坑（至2018-3-21为止）
yuqi1110的专栏
03-21 2911
1.首先最重要的是，他没有把最新修复的bug的代码上传的maven中，但是不用担心github上的代码就是最新的，clone下来，打成jar，别忘记assert下的js文件。2.js在用户一次操作时调用多次本地方法，会有很大几率造成消息丢失，目前不知原因（），尽量不要这样操作3.他的文件上传问题很大，在不同机型和不同android版本都有问题/***************************...
JsBridge使用中的各种坑
u013095264的博客
07-17 2477
各位，看到这里我想你已经被搞得很烦了对吧，是的 ，我也是。 话不多说，步入正题。当我们在使用Android Native和React.js交互的时候，发现了一个巨坑，那就是我们调用 这里registerHandler 是js调用native的方法，可以使用 ，但是当我们用到 也就是安卓调用native方法的时候 各种搞就是搞不通 这里有两点请大家注意下 1下面两个方法是必须要有的 2如果你跟...
用js写一个选项卡切换
最新发布
05-25
最后，我们使用JavaScript来实现选项卡切换的逻辑。具体来说，当用户点击选项卡按钮时，我们会隐藏所有选项卡内容，并将所有选项卡按钮的类名设置为非活动状态。然后，我们显示当前选项卡的内容，并将其对应的按钮...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值