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 相关文章推荐
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
js键盘事件的keyCode
Jul 29 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
js实现星星打分效果
Jul 05 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
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
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
JS动画效果代码3
2008/04/03 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
Python中super()函数简介及用法分享
2016/07/11 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
心得体会范文
2014/01/04 职场文书
商业活动邀请函
2014/02/04 职场文书
党员违纪检讨书
2014/02/18 职场文书
室内设计专业自荐信
2014/05/31 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
李强优秀员工观后感
2015/06/16 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
python获取淘宝服务器时间的代码示例
2021/04/22 Python
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python