JavaScript实现点击切换功能


Posted in Javascript onJanuary 27, 2021

本文实例为大家分享了JavaScript实现点击切换功能的具体代码,供大家参考,具体内容如下

在实际应用中,点击或者移入某一元素上,弹出下拉菜单或者页面,是网页设计的常见操作。

下面我们实现一种点击菜单实现菜单切换,使用js提供三种方式实现该功能。

JavaScript实现点击切换功能

1.使用html设计基本结构

<body>
<h2>多Tab点击切换</h2>
<ul id="tab">
 <li id="tab1" value="1">10元套餐</li>
 <li id="tab2" value="2">30元套餐</li>
 <li id="tab3" value="3">50元包月</li>
</ul>
<div id="container">
 <div id="content1">
 10元套餐详情:<br/> 每月套餐内拨打100分钟,超出部分2毛/分钟
 </div>
 <div id="content2" style="display: none">
 30元套餐详情:<br/> 每月套餐内拨打300分钟,超出部分1.5毛/分钟
 </div>
 <div id="content3" style="display: none">
 50元包月详情:<br/> 每月无限量随心打
 </div>
</div>
</body>

2.使用css设计基本样式

<style>
 * {
  margin: 0;
  padding: 0;
 }
 #tab li {
  float: left;
  list-style: none;
  width: 80px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  text-align: center;
 }
 #container {
  position: relative;
 }
 #content1, #content2, #content3 {
  width: 300px;
  height: 100px;
  padding: 30px;
  position: absolute;
  top: 40px;
  left: 0;
 }
 #tab1, #content1 {
  background-color: #ffcc00;
 }
 #tab2, #content2 {
  background-color: #ff00cc;
 }
 #tab3, #content3 {
  background-color: #00ccff;
 }
</style>

3.js实现点击切换功能

//原生js
 var container=document.querySelectorAll('#container>div')
 var event_li=document.querySelectorAll('#tab>li')
 var currentindex=0
 for(var i=0;i<event_li.length;i++){
 event_li[i].num=i
 event_li[i].onclick=function(){
  container[currentindex].style.display='none'
  var index_other=this.num
  container[index_other].style.display='block'
  currentindex=index_other
 }}
//jQuery实现,点击一下父元素,子元素全部display_none,再将点击事件的元素的子元素设置为display_block
var $container=$('#container>div')
$('#tab>li').click(function(){
 $container.css('display', 'none')
 var index=$(this).index()
 var index_other=$(this).val()-1
 $container[index_other].style.display = 'block'
})
//jQuery实现,点击一下父元素,最开始的元素的子元素display_none,再将点击事件的元素的子元素设置为display_block
currentindex=0
$('#tab>li').click(function(){
 $($container[currentindex]).css('display', 'none')
 var index=$(this).index()
 $container[index].style.display = 'block'
 currentindex=index
})

4.总结

(1)、原生js就可以实现点击切换的功能,但是使用jQuery后更为容易,语法简单,却功能强大。

(2)、在比较2和3方法,可以看到第2法在触发点击事件后是将所有子元素设置的显示方式为none,显然在子元素较多时,此时要修改的次数也相应的增加,势必影响加载的性能,应该优化为3方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
javascript 二分法(数组array)
Apr 24 Javascript
jquery 多级下拉菜单核心代码
May 21 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
浅析Ajax语法
Dec 05 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
vue中监听返回键问题
Aug 28 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 #Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 #Vue.js
vue实现轮播图帧率播放
Jan 26 #Vue.js
vue 组件基础知识总结
Jan 26 #Vue.js
深入了解Vue动态组件和异步组件
Jan 26 #Vue.js
如何在 Vue 表单中处理图片
Jan 26 #Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 #Vue.js
You might like
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
javascript 常用方法总结
2009/06/03 Javascript
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
python实现微信打飞机游戏
2020/03/24 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
阿德的梦教学反思
2014/02/06 职场文书
教师自我鉴定范文
2014/03/20 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
个人工作能力自我评价
2015/03/05 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书