JavaScript中tab切换 下拉框操作

已于 2024-12-02 21:25:41 修改
阅读量418 收藏
点赞数 11
分类专栏： js操作 文章标签： javascript 前端 css
于 2024-12-02 21:13:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2403_87729201/article/details/144196662
版权

tab切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/table切换.js" defer></script>
    <style>
        li{
            list-style: none;
        }
        .top ul{
            display: flex;
        }
        .top ul li{
            margin-left: 5px;
        }
        .bottem ul li{
            margin-top: 20px;
            margin-left: 5px;
            display: none;
        }//开始时所有的隐藏 只有第一个显示
        .bottem ul li:first-child{
            display: block;
        }
        .top ul li{
            cursor: pointer;
            //点击之后鼠标变成小手
        }
        .one{
            font-size: 30px;
            color: brown;
        }
    </style>
</head>
<body>
    <div>
       <div class="top">
            <ul>
                <li class="one" index="0">标题1</li>
        //加上index 点击时获得index值以便找到对应的内容
                <li index="1">标题2</li>
                <li index="2">标题3</li>
                <li index="3">标题4</li>
            </ul>
       </div>
       <div class="bottem">
            <ul>
                <li>内容1</li>
                <li>内容2</li>
                <li>内容3</li>
                <li>内容4</li>
            </ul>
       </div>
    </div>
</body>
</html>
var x1=document.querySelectorAll(".top li")
//获取所有标题并返回数组
var x2=document.querySelectorAll(".bottem li")
//获取所有内容并返回标题
for(var i=0;i<x1.length;i++)
{
    x1[i].setAttribute("index",i)
    //给x中每个元素绑定index值
    x1[i].onclick=function()
    {
        for(var j=0;j<x1.length;j++)
        {
           x1[j].className=""
           
        }
        //先让所有的标题点击之后都没有样式
        this.className="one"
        //再唯独让被点击的标题加上样式
        var num=this.getAttribute("index")
        //num是当前被点击标题的index值
        for(var k=0;k<x2.length;k++)
        {
            if(k==num)
            {
                x2[k].style.display="block"
            }
            else  x2[k].style.display="none"
        }
    }
}

效果在主页视频 也可以自己试试

下拉框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- defer延迟加载 只有外引才有效果 内嵌是不起效果的 -->
    <script src="js/下拉框.js" defer></script>
    <!-- <script>
        window.onload = function() {
            var aa = document.getElementById("aa")
            console.log(aa)
        }
         //这种适合内嵌 外引 都能用 -->
    </script> 
    <style>
        * {
            padding: 0;
            margin: 0;
            transition: all 0.7s ease;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .container {
            width: 80%;
            margin: 20px auto;
            background: rgb(165, 41, 31);
            display: flex;
            justify-content: space-around;
            position: relative;
        }
        
        .container a {
            background: rgb(165, 41, 31);
            padding: 10px;
            display: block;
            color: #fff;
        }
        
        .container a:hover {
            background: #fff;
            color: rgb(165, 41, 31);
        }
        
        .container ul {
            position: absolute;
            height: 0;
            display: none;
        }
    </style>
</head>

<body>
    <div class="container" id="aa">
        <div class="item">
            <a href="#">学校概况</a>
            <ul>
                <li><a href="#">学校简介</a></li>
                <li><a href="#">学校章程</a></li>
                <li><a href="#">历任领导</a></li>
                <li><a href="#">现任领导</a></li>
                <li><a href="#">校园风光</a></li>
            </ul>
        </div>
        <div class="item">
            <a href="#">机构设置</a>
            <ul>
                <li><a href="#">历任领导</a></li>
                <li><a href="#">现任领导</a></li>
                <li><a href="#">校园风光</a></li>
            </ul>
        </div>
        <div class="item">
            <a href="#">学科专业</a>
            <ul>
                <li><a href="#">历任领导</a></li>
                <li><a href="#">现任领导</a></li>
                <li><a href="#">校园风光</a></li>
                <li><a href="#">校园风光</a></li>
                <li><a href="#">校园风光</a></li>
                <li><a href="#">校园风光</a></li>

            </ul>
        </div>
        <div class="item">
            <a href="#">招生信息</a>
            <ul>
                <li><a href="#">历任领导</a></li>
                <li><a href="#">现任领导</a></li>
                <li><a href="#">校园风光</a></li>
            </ul>
        </div>
        <div class="item">
            <a href="#">人才招聘</a>
            <ul>
                <li><a href="#">历任领导</a></li>
                <li><a href="#">现任领导</a></li>
                <li><a href="#">校园风光</a></li>
                <li><a href="#">历任领导</a></li>
                <li><a href="#">现任领导</a></li>
                <li><a href="#">现任领导</a></li>
                <li><a href="#">现任领导</a></li>
                <li><a href="#">现任领导</a></li>
            </ul>
        </div>
        <div class="item">
            <a href="#">国际合作</a>
            <ul>
                <li><a href="#">历任领导</a></li>
                <li><a href="#">现任领导</a></li>
                <li><a href="#">校园风光</a></li>
                <li><a href="#">历任领导</a></li>
                <li><a href="#">现任领导</a></li>
            </ul>
        </div>
    </div>

</body>

</html>
var items=document.getElementsByClassName("item")
for(var i=0;i<items.length;i++)
{
    items[i].onmouseenter=function()
    {
        this.querySelector("ul").style.display="block"
    }
    items[i].onmouseleave=function()
    {
        this.querySelector("ul").style.display="none"
    }
}

这是一个简便的下拉框 他是瞬间展开的

我们需要给他加上点属性让他缓慢展开 这样更美观

这就需要用到transition这个属性了

举个例子

<style>
.demo{
            width: 200px;
            height:100px;
            background-color: red;
            transition: width 4s ease;
            //指的是点击之后背景的宽度会用四秒变化过去 且这个过程由慢到快
            //可以设宽，颜色，高度，也可以是所有all
        }
        .demo:hover{
            width: 400px;
            height:200px;
            background-color: yellow;
        }
</style>

<body>
    <div class="demo">

    </div>
</body>

注意 transition对display属性不识别 所以并不适用 但可以考虑别的角度 比如高度

让初始所有的高度都为0 鼠标放上去之后高度缓慢变为每个li元素的高度之和就可以实现渐变这个过程

不能直接给定值比如放上去变成200px 拿走变成0

这种是不合理的

因为有的li多有的少 每种情况都不相同

改进之后

.container ul {
            position: absolute;
            height: 0;
            /* display: none; */
            height: 0;
            overflow: hidden;
            /* 防止子元素超出 */
        }
var items=document.getElementsByClassName("item")
for(var i=0;i<items.length;i++)
{
    items[i].onmouseenter=function()
    {   
        var arr=this.querySelectorAll("ul a")
        //找到每个item下所有的a标签 知道数量用以计算高度
        var num=0;
        for(var j=0;j<arr.length;j++)
        {
           num+=arr[j].clientHeight
          //获取a标签总高度 这个高度计算了padding
        }
        this.querySelector("ul").style.height=num+"px"//顺序不能颠倒
    }
    items[i].onmouseleave=function()
    {
        this.querySelector("ul").style.height="0px"
    }
}

另一种方式

鼠标点击之后下拉框展开 点击别处时下拉框收回

这里要用到之前发的事件传播机制

var items=document.getElementsByClassName("item")
for(var i=0;i<items.length;i++)
{
    items[i].onclick=function(e)
    {   
        //阻止事件传播
        这是因为document是所有元素的父级 点击document之后事件进行传播相当于也点了ul这个元素
        //也会让他高度变为0 所以要阻止事件传播 防止点击之后下拉框不展示
        /让事件只在自己这里绑定
        e.stopPropagation()
        var ul=document.querySelectorAll("ul")
        var arr=this.querySelectorAll("ul a")
        for(var k=0;k<ul.length;k++)
        {
          ul[k].style.height="0px"
        }
        //唯独让被点击的ul有高度
        var arr=this.querySelectorAll("ul a")
        //找到每个item下所有的a标签 知道数量用以计算高度
        var num=0;
        for(var j=0;j<arr.length;j++)
        {
           num+=arr[j].clientHeight
          //获取a标签总高度 这个高度计算了padding
        }
        this.querySelector("ul").style.height=num+"px"//顺序不能颠倒
    }
   
}
document.onclick=function()
{
    var ul=document.querySelectorAll("ul")
    for(var k=0;k<ul.length;k++)
    {
        ul[k].style.height="0px"
    }
}

不懂得可以粘一下代码自己看看效果实践一下

如何在vue项目中实现tab切换
weixin_70245286的博客
02-25 680
vue项目中如何实现简单的tab切换以及遇到的问题
原生微信小程序实现tab切换效果demo
qq_43447509的博客
08-05 1020
效果图 Wxml <!-- tab框 --> <view class="nav_title"> <view class="nav_tab"> <!-- 如果选中的下表等于当前的索引，就使用active class名，否则class名为common --> <view wx:for="{{list}}" wx:key="list" class="{{selected==index?'active':'comm
JS实现下拉框切换和tab标签切换
weixin_30820077的博客
11-27 637
现在商城网页上会有下拉框切换内容，是如何实现的呢，研究了一天，在调整js代码和查找bug。最终完成了自己想要的效果，我没有写CSS样式，只是实现了基本功能，如果对你有所帮助，可以自己写css，使其更加美观。废话不多说，直接复制代码即可看到演示效果。 1.效果展示： 2.代码实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran...
vue+element select下拉框嵌套tab标签页
tianshangfeiya的博客
04-10 1060
【代码】vue+element select下拉框嵌套tab标签页。
Tab 标签页下拉菜单相关操作逻辑处理
qq_36437172的博客
11-18 1156
右击 Tab 标签页显示下拉菜单项，例如：刷新当前页、关闭当前页、关闭左侧、关闭右侧、关闭其他、关闭所有等操作。
antd form 解决切换下拉框 对应输入框必选非必选问题
weixin_36766850的博客
12-28 1745
需求：form表单内一个输入框 和一个选择框。当选择框选择为"非必要"时，输入框必填，当选择框为其他时，输入框不非必填。 解决：form表单中选择框增加required校验，为true时（最好直接判断，不要用useState定义值，判断不及时），则提示星号。且提交时记得增加校验判断。 产生问题：当选择“非必要”时，输入框输入，再退出，提示“请输入内容”，不处理再切换为其他，输入框的错误提示仍存则。 解决:再切换的onChange事件中，增加resetField(['form表单对应的输入框字段‘],或
vue同个页面二级tab栏切换
weixin_48329823的博客
12-27 1361
这边只是提供一个思路，真正的项目就按需求改一下就可以 用组件跳转： 默认显示的是index组件 要切换组件通过点击tab栏 去动态改变:is 然后点击事件把对应的组件传到"currentComp"变量里面 <template> <div class="content flex"> <!-- 二级tab栏开始 --> <div class="flex_row justify_end tab"> <div cla...
vue 实现 鼠标滑动展示tab栏切换
逆风优雅的博客
01-13 1283
动画效果： 代码如下： <template> <div id="header"> <div class="conten_width"> <div class="contnet_width_content"> <div style=" transform: translateX(-242px);" > <img src="./../../assets/img/logo.
Vue3实现页面缓存，切换tab页面保持不变
qq_42264030的博客
11-16 6100
tab页面切换保存不更新（缓存）
element切换tab,下拉框点击无法选择
09-07
在element框架中切换tab和下拉框点击无法选择的问题可能是由于以下几个原因导致的： 1. 元素定位问题：首先需要确认切换tab和下拉框点击的元素是否正确定位。可以使用元素的唯一标识属性（如id、class、xpath等）来...
Vue中实现回车键切换焦点的方法
10-15
用户界面中经常会涉及到键盘操作，例如使用Tab键和Enter键来切换焦点。但实际情况下，用户需求千变万化，有时候用户会提出使用回车键Enter来切换焦点的需求，这在某些表单操作中非常常见。因此，了解如何在Vue项目中...
键盘操作select下拉框
12-24
以下是一个使用JavaScript实现键盘操作`select`下拉框的示例： ```javascript document.querySelectorAll('select').forEach(select => { select.addEventListener('keydown', function(event) { const options =...
网上体育商城的设计与实现（有商家端）（SpringBoot+Vue+MySQL）
欧阳小白闯天涯
05-20 789
本文介绍了一个基于互联网的网上体育商城系统的设计与实现。该系统旨在解决传统实体店的地域限制和库存管理问题，为用户提供便捷的购物体验。系统分为前台和后台两部分，前台支持商品浏览、搜索、购买等功能，后台则提供商品管理、订单管理、用户管理等功能。系统采用SpringBoot、Vue.js和MySQL等技术栈，具备良好的扩展性和维护性。文章详细分析了系统的需求、功能模块、技术可行性、市场可行性、经济可行性和法律法规可行性，并提供了功能代码示例。通过该系统，用户可以高效完成购物任务，提升购物体验。
小程序uniapp+vue2/vue3+lime-echart各种图表使用【懒人专用，建议收藏】
专注于Java架构学习 https://gitee.com/laokouyun https://github.com/KouShenhai
05-19 373
本文介绍了如何在uniapp中集成Echarts图表。首先，需要安装HBuilderX和微信开发者工具。接着，推荐使用lime-echart插件，并通过npm安装echarts和echarts-stat库。然后，详细展示了如何在Vue3中创建并配置一个饼图页面，包括引入Echarts、初始化图表、设置图表选项等步骤。最后，提供了更多示例的GitHub链接。通过本文，读者可以快速上手在uniapp中使用Echarts绘制图表。
JavaScript_DOM-03
m0_75134325的博客
05-19 184
【代码】JavaScript_DOM-03。
Redis实现分布式锁的原始方式详解：从入门到实践
一勺菠萝丶的博客
05-18 555
通过Redis实现分布式锁需要严格遵循四个基本原则。虽然本文展示了基础实现方案，但在实际生产环境中，建议使用经过验证的框架（如Redisson），它们已经处理了续约、重试、集群容错等复杂问题。记住：分布式系统的可靠性永远不能完全依赖单一中间件，必须结合业务场景设计兜底方案。
shader 圆形水波纹效果 threejs vue3
最新发布
m0_65915285的博客
05-22 94
【代码】shader 圆形水波纹效果 threejs vue3。
Typescript 教程
weixin_43748495的博客
05-21 691
TypeScript是JavaScript的超集，由微软2012年发布，旨在增强JavaScript功能，特别适合大型项目开发。它提供静态类型检查，在编译时捕获类型错误，提高代码质量和可维护性。核心特性包括类型声明、类型推断和编译为JavaScript执行。TypeScript支持三种特殊类型：any（无限制）、unknown（类型安全版any）、never（永不存在的值）。尽管有冗长类型声明等缺点，但通过合理配置（如tsconfig.json）和工具（ts-node）可以优化开发体验。使用时需注意any类
Vue百日学习计划Day43-45天详细计划-Gemini版
LuckyLay的博客
05-20 894
【代码】Vue百日学习计划Day43-45天详细计划-Gemini版。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值