开关效果运用

最新推荐文章于 2021-08-03 17:56:13 发布
最新推荐文章于 2021-08-03 17:56:13 发布
阅读量765 收藏 1
点赞数
文章标签： menu function html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsa/article/details/1687519
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript" src="switchmenu.js"></script> 
<style type="text/css"> 
<!-- 
.menutitle { 
cursor:pointer; 
margin-bottom: 2px; 
padding: 2px; 
color:#000; 
width:120px; 
text-align:center; 
background:#efefef; 
border-right: #999 1px solid; 
border-bottom: #999 1px solid; 
}  
.submenu { 
display: none; 
margin-left: 10px; 
margin-bottom: 5px; 
}  
--> 
</style> 
 </HEAD>

 <BODY>
  <div id="maindiv"> 
<div class="menutitle" οnclick="switchmenu('sub1')">menu1</div> 
<span class="submenu" id="sub1"> 
- <a href="#">text-1</a> <br /> 
- <a href="#">text-2</a> 
</span> 
<div class="menutitle" οnclick="switchmenu('sub2')">menu2</div> 
<span class="submenu" id="sub2"> 
- <a href="#">text-1</a> <br /> 
</span> 
<div class="menutitle" οnclick="switchmenu('sub3')">menu3</div> 
<span class="submenu" id="sub3"> 
- <a href="#">text-1</a> <br /> 
</span> 
</div> 

 </BODY>
</HTML>

js原文件：

 

function  switchmenu(obj) {
        if(document.getElementById){
        var el = document.getElementById(obj);
        var ar = document.getElementById("maindiv").getElementsByTagName("span"); 
                if(el.style.display != "block"){
                        for (var i=0; i<ar.length; i++){
                                if (ar[i].className=="submenu") 
                                ar[i].style.display = "none";
                        }
                        el.style.display = "block";
                }else{
                        el.style.display = "none";
                }
        }
}
zsa
关注
开关效果
weixin_30491641的博客
05-30 66
<style> /*关闭状态*/.news_box{width:100%;height:2rem;margin-bottom:15px;}.dashDiv{ float: right; border-radius: 1rem; background-color: #cbcbcb; width: 3.2rem; height: 1.65rem;...
Android简单实现一个开关效果
Mrzhaohe的博客
09-09 325
废话少说，上图 关闭状态： 开启状态： 首先这里我使用了Switch控件（自行百度） 下面上代码： <Switch android:id="@+id/open_h" android:layout_width="wrap_content" android:layout_height="match...
一些设置页面的开关效果
bzy601638015的专栏
06-12 934
今天我用了两种类似开关的效果做了比较，
制作css开关,纯 CSS 实现开关效果
weixin_28953361的博客
08-03 351
大家好，我又来了，这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果。checkbox的选中、未选中的特性，刚好对应开关的打开、关闭on:打开 off:关闭未选中，则关闭开关选中，则打开开关复制代码开始画出off、on状态的草图这里要讲解一下，使用了position来实现的定位。有不了解的同学可以打开MDN查看相关知识off状态草图on状态草图复制代码.toggle{dis...
怎么用不同方法实现开关效果
05-22 894
开关按钮的效果是我们的产品原型中常见的一种效果，不管移动端还是PC端都会用到。那么可能有同学会问，既然这么常见，它应该如何实现？别急，下面就会带大家用几种不同的方法来制作开关。Let’s go!先来看一下，开关效果是怎样的好的，看到了这个效果，我们就根据这个效果一起来看看，可以用什么方法来做。可以看到，开关有两种状态，“开”和“关”，点击之后，会在这两种状态之间进行切换。第一，可以将“开”和“关”...
企博网开关灯效果的jquery相册插件.zip
07-11
《企博网开关灯效果的jQuery相册插件详解》 在互联网网页设计中，吸引用户的注意力和提供良好的用户体验是至关重要的。其中，图片展示方式的创新与互动性是提升用户体验的重要手段之一。企博网开关灯效果的jQuery...
CSS3模拟IOS滑动开关效果
09-24
CSS3模拟IOS滑动开关效果是网页前端开发中的一项技术，它利用CSS3的样式和动画效果，模拟出类似于iOS系统中的开关按钮交互体验。这种效果不仅美观，而且可以提供用户友好的操作反馈，增强界面的互动性和趣味性。接...
使用jQuery和PHP实现类似360功能开关效果
10-26
这种开关效果可以用于多种场景，尤其是那些需要远程控制产品功能开启与关闭的场景。具体来说，我们会通过结合前端的jQuery技术、后端的PHP处理以及数据库MySQL来完成这一功能。 首先，准备工作需要我们搭建一个...
Android可滑动的开关效果
08-30
在Android开发中，滑动开关（Switch）是一种常见的交互元素，用于用户进行二选一的选择，比如开启或关闭某个功能。...通过理解并熟练运用这些知识点，开发者可以创建出更加符合用户习惯且视觉效果优秀的应用程序。
中断嵌套引起的问题记录
qinrenzhi的博客
09-07 2504
1.通过定时器的1ms中断实现延时处理函数。 2.在另一个更高优先级的中断处理函数中调用延时函数，导致定时器中断无法执行，死机。
利用定时/计数器T1产生定时时钟，由P1口控制8个发光二极管，使8个提示灯依次一个一个闪动，闪动频率为10次每秒（8个灯亮一遍为一个周期），循环
热门推荐
QIAOSHUXIANG的专栏
09-01 3万+
#include #include #define uchar unsigned char #define uint unsigned int uchar tt,aa; //sbit d1=P1^0; void main() { TMOD=0x10; //选择定时器 t0的工作方式为1 EA=1; TH0=(65536-50000)/256; TL0=(65536-50000)
可以展开刷新不改变的二级树形菜单，大类点击不展开小类，小类有旁边的图标展开（图）...
anjichan4261的博客
04-17 121
以展开刷新不改变的二级树形菜单，大类点击不展开小类，小类有旁边的图标展开。 <!--#includefile="conn.asp"--> <SCRIPTlanguage=JavaScript> var__cc_uid="shenglu"; </SCRIPT> <SCRIPTtype=text/javascript&gt...
无限级菜单结构 与 列表框无限级联动, 类 XSelect by shawl.qiu
星☆空 | 对生活要知足,学习要不知足,为人处事要知不足. 卍 ♂ | ♀ 卐 - 科技以人为本.
11-10 4602
无限级菜单结构 与 列表框无限级联动, 类 XSelect by shawl.qiu压缩包包含:XSelect v1.0, XMenu v1.3, Select v1.3.1, Menu v1.0.1(带X的是单表, 不带X的是多表.)说明:继上一篇文章:无限级菜单结构 与 Javascript 实现算法, 类 XMenu by shawl.qiuhttp://blog.csdn.net/bt
STM32之中断嵌套控制器
lushoumin的博客
12-24 3601
STM32 (Cortex-M3) 中的优先级概念 STM32(Cortex-M3)中有两个优先级的概念：抢占式优先级和响应优先级，也把响应优先级称作“亚优先级”或“副优先级”，每个中断源都需要被指定这两种优先级。 1. 何为占先式优先级(pre-emption priority) 高占先式优先级的中断事件会打断当前的主程序/中断程序运行—抢断式优先响应，俗称中断嵌套。 2
LPC2114/EASYARM2100中断嵌套设计
mlzhu007的专栏
12-10 1587
在lpc的工程文件中有个IRQ.s文件，这个文件就是用来处理中断嵌套的。 在文件的末尾添加中断处理函数的句柄handler：Eint0_Handler HANDLER IRQ_Eint0。IRQ_Eint0就是中断服务程序名。 然后要在使用这个句柄的c文件中声明这个句柄，声明的格式跟声明函数的格式是一样的，如：void Eint0_Handler(void); 实现中断嵌套
标签之间的切换（适用于图片，类似于开关效果）
lrp9090的博客
09-28 455
效果展示 点击后： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;&lt;/t
jQuery实现滑动开关效果及源码下载
实现滑动开关按钮的关键在于理解HTML结构，使用jQuery进行事件监听和元素操作，以及运用CSS来控制视觉效果。通过结合这些技术，我们可以创建出具有动态交互性的滑动开关，用户只需轻轻一按，就能轻松切换状态。提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值