2020-11-26

最新推荐文章于 2023-07-23 16:50:23 发布
最新推荐文章于 2023-07-23 16:50:23 发布
阅读量81 收藏
点赞数
文章标签： tab
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51059284/article/details/110210596
版权

tab栏切换仿写

  • 排他思想（当前变，其他不变）

pink 视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab pink 视频</title>
    <link rel="stylesheet" href="./tab.css">
    <script src="./tab.js"></script>
</head>
<body>
    <div class="tab">
        <div class="tabList">
            <ul>
               <li class="current">商品介绍</li>
               <li>规格与包装</li>
               <li>售后保障</li>
               <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>

        <div class="tabcon">

            <div class="item" style="display: block;">商品</div>
            <div class="item">规则</div>
            <div class="item">售后</div>
            <div class="item">评价 </div>
            <div class="item">手机</div>

        </div>
    </div>
    <script src="./tab.js"></script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab pink 视频</title>
    <link rel="stylesheet" href="./tab.css">
    <script src="./tab.js"></script>
</head>
<body>
    <div class="tab">
        <div class="tabList">
            <ul>
               <li class="current">商品介绍</li>
               <li>规格与包装</li>
               <li>售后保障</li>
               <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>

        <div class="tabcon">

            <div class="item" style="display: block;">商品</div>
            <div class="item">规则</div>
            <div class="item">售后</div>
            <div class="item">评价 </div>
            <div class="item">手机</div>

        </div>
    </div>
    <script src="./tab.js"></script>
</body>

</html>

var tabList=document.querySelector(".tabList");
var Liall=tabList.querySelectorAll("li");
var items=document.querySelectorAll('.item')
for(var i=0;i<Liall.length;i++){
    Liall[i].setAttribute('index',i);
    Liall[i].onclick=function(){
        //排他思想
        for(var i=0;i<Liall.length;i++){
            Liall[i].className="";
        }
        
        this.className="current";
       var index= this.getAttribute('index');
        console.log(index);
        for(var i=0;i<items.length;i++){
            items[i].style.display='none';
        }
        items[index].style.display='block';
    }
}
_1+
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手把手的教你安装PyCharm --Pycharm安装详细教程（一）（非常详细，非常实用）...
weixin_30877181的博客
01-09 10万+
简介 Jetbrains家族和Pycharm版本划分： pycharm是Jetbrains家族中的一个明星产品，Jetbrains开发了许多好用的编辑器，包括Java编辑器（IntelliJ IDEA）、JavaScript编辑器（WebStorm）、PHP编辑器（PHPStorm）、Ruby编辑器（RubyMine）、C和C++编辑器（CLion）、.Net编辑器（Rider）、iOS/ma...
FixHexTest2020-11-26.zip
11-26
标题“FixHexTest2020-11-26.zip”表明这是一个关于修复或处理十六进制（Hex）文件的软件或者代码库，日期2020-11-26可能指的是该版本的发布日期。这个压缩包可能是为了帮助用户理解和操作十六进制数据，特别是针对...
个人网站https://www.dulucy.cn
dulucy
07-23 1565
https://dulucy.cn
Pycharm 安装 autopep8 工具
weixin_30621959的博客
05-03 74
引言：此处能看到pep8 的详细介绍：https://www.python.org/dev/peps/pep-0008/。是 Style Guide for Python Code，python代码的style guide 一、前提准备 在Python安装了pip的情况下，命令行输入 pip install autopep8 二、PyCharm设置 成功之后，打开P...
sql server 2008 r2 安装文件+图解安装过程+注意事项
weixin_34026484的博客
04-12 1023
sql server 2008 r2 安装文件+图解安装过程+注意事项 sql server 2008 r2下载地址：【http://yunpan.cn/QNZJnrdjfdBP9】 安装步骤： 一、解压完压缩包之后，双击【setup】： 左侧选择【安装】-->右侧选择【全新安装或向现有安装添加新功能】 二、全部通过就点击【...
PyCharm使用Anaconda3-5.3.1-Windows-x86_64工具集成库，Anaconda默认Python下安装Eric6
weixin_30485379的博客
11-27 462
1、安装PyCharm略 2、安装Anaconda略, windows环境变量lib配置 anaconda下python.exe目录（Anaconda3-5.3.1-Windows-x86_64 集成了python 3.7以及常用库）； 3、PyCharm集成Anaconda 开发工具的集成环境： 下配置指向Anaconda中python.exe 配置如下：File->Settin...
2020-07-07
北漂猿
07-07 779
c代码-C静态链组2020-11-26
07-14
在本项目“C代码-C静态链组2020-11-26”中，我们将深入探讨静态链表的概念、实现以及在`main.c`文件中可能涉及的关键技术。 静态链表是相对于动态链表而言的，它使用数组来存储链表的节点，每个节点在编译时就已经...
magento-ce-2.4.0-2020-07-24-11-15-38.tar.gz
08-25
magento-ce-2.4.0-2020-07-24-11-15-38.tar.gz 不带sample data
关于 https://www.duba.com/?f=qd_sch 这个主页的问题
orDream的博客
09-23 1万+
今天无意间用了一下驱动精灵，安装完成之后，每次打开 chrome 浏览器都会弹出一个这样的 毒霸页面 duba.com 的页面   很是恼火，在 regedit 注册表里搜索到  计算机\HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Internet Explorer\Main 把 Start Page 修改成你想要的主页 然...
网站http升级为https
duyunzhi的博客
09-10 742
上星期域名审核终于通过了，可让我好等。拿到域名第一件事肯定是把域名映射到自己的个人博客，中间也是遇到了许多操蛋的事情。 我是用nginx反向代理来实现的。 好了 进出入正题，nginx反向代理之后是http协议，每次自己访问自己的博客Chrome都提示该网站是不安全的 这对一个强迫症患者是不能忍的，然后去仔细了解了一下http和https协议。 什么是HTTP? 超文本传输协议，是一个基于请求...
Pycharm2018.1安装及Python3.6环境配置
白色项链的专栏
05-05 2235
Step1：安装Pycharm，安装过程可以下一步、下一步即可。网上教程的很多，可以参考下面链接： Pycharm具体步骤https://www.cnblogs.com/du-hong/p/10244304.html Pycharm软件分享，链接：https://pan.baidu.com/s/1qBshVX_pGL-4082QCx_aEw 提取码：pogz Step2：本文以pycharm...
windows下PyCharm安装及使用
热门推荐
yctjin的博客
04-21 12万+
【传送门】pycharm虽然好用，但是比较臃肿，推荐使用Vscode，详见另外一篇文章： https://blog.csdn.net/yctjin/article/details/80184988 一、首先安装pycharm，可以参考这篇文章：http://www.jianshu.com/p/042324342bf4 搭建环境 1、win10_X64，其他Win版本也可以。 2...
DBO-CNN-BiLSTM-Attention蜣螂算法优化多变量时间序列预测，含优化前后对比（Matlab完整源码和数据）
08-17
1.Matlab实现DBO蜣螂算法优化CNN-BiLSTM-Attention多变量时间序列预测，含优化前后对比（Matlab完整源码和数据）优化学习率，神经元个数，注意力机制的键值, 正则化参数。 2.输出MAE 、 MAPE、MSE、RMSE、R2多指标评价，运行环境Matlab2023及以上。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：机器学习之心，博客专家认证，机器学习领域创作者，2023博客之星TOP50，主做机器学习和深度学习时序、回归、分类、聚类和降维等程序设计和案例分析，文章底部有博主联系方式。从事Matlab、Python算法仿真工作8年，更多仿真源码、数据集定制私信.
财务现金记账表（公式计算日期查询）.xlsx
最新发布
08-17
工资表，财务报表，对账表，付款申请，财务报告，费用支出表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
asp.net高校网上教材征订系统的设计与实现(源代码+论文)
08-17
该项目展示了一个基于ASP.NET的高校网上教材征订系统的设计与实现，涵盖源代码和论文部分。该系统旨在简化高校教材征订流程，提高教材管理效率。 源代码 部分包含以下功能模块： 用户管理： 提供用户注册、登录和角色管理功能。包括学生、教师和管理员等不同角色的权限设置，以确保系统的安全性和数据的隐私保护。 教材管理： 实现教材信息的添加、编辑和删除。系统支持教材的分类管理、信息搜索和浏览，确保教材数据的准确性和可用性。 征订管理： 学生可以在线浏览教材列表并提交征订申请，系统支持订单处理、支付集成及订单状态跟踪。管理员可以审核订单、生成发货单并处理退款请求。 报表生成： 提供统计报表生成功能，包括教材销售情况、订单统计、用户活动等，帮助管理人员做出数据驱动的决策。 用户界面： 使用ASP.NET MVC框架构建，前端界面简洁友好，支持多终端访问。系统设计注重用户体验，提供流畅的操作体验。 论文 部分详细描述了系统的设计与实现过程： 需求分析： 明确了系统的主要需求，包括用户管理、教材管理、征订管理和报表功能，确保系统符合用户需求。 系统架构设计： 介绍了系统的总体架构，包
财务系统（小企业会计记账软件）.xls
08-17
工资表，财务报表，对账表，付款申请，财务报告，费用支出表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
农牧集团企业数字化建设总体规划SAP解决方案参考.pdf
08-17
农牧集团企业数字化建设总体规划SAP解决方案参考.pdf
java基于ssm+jsp web个人财务管理系统源码 带毕业论文
08-17
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
{"result":{"total":38,"items":[{"changeTime":"2020-11-26"}]}} 我想要 38
04-02
您可以使用以下Python代码来提取结果中的38： ``` import json result = '{"result":{"total":38,"items":[{"changeTime":"2020-11-26"}]}}' data = json.loads(result) total = data['result']['total'] print(total) # 输出38 ``` 首先，我们将结果字符串转换为Python对象使用`json.loads()`方法。然后，我们可以通过键值对来获取`total`的值，即`data['result']['total']`。最后，我们将结果打印出来，即38。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值