javascript实现选项卡切换效果

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量3.5k 收藏 8
点赞数 1
分类专栏： web前端 文章标签： javascript

直接代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */  
     *{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}
     ul{list-style-type: none;}
     a{text-decoration: none;}

     #tab-list{width: 275px;height:190px;margin: 20px auto;}

     #ul1{border-bottom: 2px solid #8B4513;height: 32px;}
     #ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
     #ul1 li:hover{cursor: pointer;}
     #ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}

     #tab-list div{border: 1px solid #7396B8;border-top: none;}
     #tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}

     .show{display: block;}.hide{display: none;}
    </style>
    <script type="text/javascript">

    window.onload = function() {
        var oUl1 = document.getElementById("ul1");
        var aLi = oUl1.getElementsByTagName("li");
        var oDiv = document.getElementById("tab-list");
        var aDiv = oDiv.getElementsByTagName("div");
        for(var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            aLi[i].onmouseover = function() {
                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].className = "";
                }
                this.className = "active";
                for(var j = 0; j < aDiv.length; j++) {
                    aDiv[j].className = "hide";
                }
                aDiv[this.index].className = "show";
            }        
        }
    }


    </script>

</head>
<body>
<!-- HTML页面布局 -->
<div id="tab-list">
    <ul id="ul1">
        <li class="active">房产</li><li>家居</li><li>二手房</li>
    </ul>
    <div>
        <ul>
            <li><a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a></li>
            <li><a href="javascript:;">200万内购五环三居 140万安家东三环</a></li>
            <li><a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a></li>
            <li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>
        </ul>
    </div>    
    <div class="hide">
        <ul>
            <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a></li>
            <li><a href="javascript:;">经典清新简欧爱家 90平老房焕发新生</a></li>
            <li><a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a></li>
            <li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
        </ul>
    </div>    
    <div class="hide">
        <ul>
            <li><a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a></li>
            <li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>
            <li><a href="javascript:;">黄城根小学学区仅260万 121平70万抛!</a></li>
            <li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>
        </ul>
    </div>
</div>


</body>
</html>

效果图
这里写图片描述

我可不是小流氓
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML5+CSS3+JS小实例：Tab选项卡动画切换效果
艾恩小灰灰的博客
06-20 1169
字体图标库：font-awesome。实例：Tab选项卡动画切换效果。技术栈：HTML+CSS+JS。
基于JavaScript实现Tab选项卡切换效果
10-21
主要介绍了基于JavaScript实现Tabs选项卡切换效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于JavaScript实现选项卡效果
01-21
一个简单的选项卡的关键在于：当切换页面时，如何让所选的选项和与其对应的内容同时出现，并且在选择其他的内容时，不影响新的内容的显示。 其中用到两个很关键的思想： 1.为对象增加index属性，并通过this对index 的调用来使每个选项能显示出所对应的内容，并且属性值要设置为循环时的数值-i。 2.通过对class（类）的灵活使用，来改变当先所选中目标的样式。 3、用for循环嵌套事件对每一项进行遍历。 4、在编译时，位于body中的div和input要有预先定义的行内样式或者信息。 5、button和div.style.display要同时清零，同时出现才能达到选项卡的目的。
原生js实现切换选项卡效果，点击某一选项展示对应内容【含完整html代码】
qq_40261601的博客
02-25 1662
CSS1、左右布局，设置选项卡左浮动，内容右浮动。为防止当子元素设置浮动脱标后，父元素卡片塌陷，可以设置父元素overflow: hidden;，利用BFC机制消除浮动带来的影响。2、右侧内容展示区，文字和图片用一个包裹，设置display: none;，即默认不加载。再定义一个激活类，设置display: block;，激活状态下加载div。JavaScript 1、利用事件委托，为父元素添加监听事件onclick，判断用户点击的是哪个选项卡。2、每次点击事件发生后，将点击的选项卡对
原生js实现选项卡功能
11-28
效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原生js选项卡写法</title> <style> #div1 div{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;} .active{background: red;} </style> [removed] [removed]=function(){//原生js选项卡写法 var oDiv = document.getElem
js实现选项卡
qq_52440306的博客
09-23 6724
选项卡在网页中经常使用，那么如何实现选项卡呐？ 现在的框架省去dom操作，开发者只需要关注数据即可，那么真的不需要操作dom了吗，是需要的，只不过程序已经帮忙做了这件事，纯粹的数据逻辑也将前端变得更难了。 整体结构 <div class="app" id="app"> <div class="key-left"> <div class="tap">1</div> <div class="tap">2</div>
2022-06-13 jQuery案例:滑动选项卡
GAARA
06-13 208
思路 设置一个单独的选中框, 通过在animate中设置其left值,造成其从当前选项往目标选项移动的动画效果, 设置其层级,确保其处于选项内容的下方 底部内容随顶部选项卡改变
用JS写一个选项卡
wang_swa99er的博客
09-06 286
用JS写一个选项卡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1 bu
使用JavaScript实现选项卡
weixin_51688356的博客
02-06 544
点击选项卡时内容随之改变，实现点击选项卡切换。
javascript实现tabs选项卡切换效果(扩展版)
10-27
常用的页面效果有弹出层效果，无缝滚动效果，选项卡切换效果，接下来与大家分享一款自己用原生javascript写的选项卡切换效果在原有的基础上进行了扩展，加入了自动轮播，这样就变成了类似图片轮播的效果
基于javascript实现最简单的选项卡切换效果
10-22
主要介绍了基于javascript实现最简单的选项卡切换效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js如何实现选项卡高亮+内容切换
rr20060119的博客
10-06 246
【代码】js如何实现选项卡高亮+内容切换。
通过JavaScript实现tab切换
weixin_54043141的博客
09-01 1359
在Web开发中，Tab切换是一个常见的功能，它允许用户在不同的页面部分之间进行切换。下面是一个使用JavaScript实现Tab切换的案例，我将详细描述如何实现这个功能。
【JavaScript 进阶教程】案例一：使用面向对象模拟浏览器顶部切换栏
weixin_52212950的博客
06-20 3247
我们已经学会了很多 Tab 栏的写法，原生 JS 的写法，jQuery 的写法等等，学了面向对象后，我们就要学会用面向对象来实现我们 ES6 的第一个小案例------面向对象 Tab 切换栏，其中和以往不同的是，增加了添加 tab 栏，双击修改 Tab 栏等功能，其实它更像我们浏览器网页的顶部选项卡。...............
javascript案例13——tab栏切换、导航栏切换、菜单栏切换、选项卡切换
努力、拼搏、奋进
05-07 1479
一、案例描述 点击导航栏，下方盒子模块随之变化。 二、案例效果演示 三、案例局部代码 css代码： <style> * { margin: 0; padding: 0; } .tab { width: 600px; margin: 50px auto; } ul { overflow: hidden; border: 1px solid #cc
分享88个选项卡TABJS特效，总有一款适合您
adendean的博客
12-05 114
分享88个选项卡TABJS特效，总有一款适合您
原生JS实现选项卡
qq_45473786的博客
03-13 1179
文章目录案例描述HTML代码全部HTML代码展示HTML代码分解 ----头部HTML代码分解 ----内容CSS样式JS实现代码全部JS代码显示JS代码分解 ----头部样式改变JS代码分解 ----内容改变 案例描述 在浏览器中显示一个选项卡界面，头部为1、2、3、4、5。点击头部任意一个数字，都在下方显示出不同的信息，并且鼠标停留在任意一个数字上时，数字的颜色改变。案例如下图所示 默认的是...
一个小时学习javaScript
weixin_43064364的博客
04-20 925
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 997
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
JavaScript实现选项卡的淡入效果
05-15
可以使用jQuery来实现选项卡的淡入效果，具体代码如下： HTML代码： ```html <li class="active"><a href="#tab1">选项卡1</a></li> <li><a href="#tab2">选项卡2</a></li> <li><a href="#tab3">选项卡3</a>...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值