使用if…else语句做导航下拉菜单

最新推荐文章于 2022-08-16 11:40:24 发布
最新推荐文章于 2022-08-16 11:40:24 发布
阅读量470 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/cn-wsy/archive/2012/03/09/2387789.html
版权

页面css样式
<style type="text/css">
<!--
 body, td, th {font-size: 12px;margin:30px;padding:0;}
 a {color:#000000;text-decoration:none;}
 a:hover {color:#FF0000;}
 ul, li {margin:0;padding:0;}
 ul, li {list-style:none;}
 .nav {width:600px;height:30px;line-height:30px;background:#999933;margin:0 auto;}
 .nav ul {margin-left:50px;position:absolute;}
 .nav ul li {float:left;display:block;width:100px;text-align:center;background:#CCCC99;font-size:13px;margin-right:2px;height:30px;line-height:30px;
                position:relative;}
 .subnav {width:100px;position:absolute;top:30px;left:-50px;z-index:-1; border:1px solid #666633;}
-->
</style>

// js判断语句，写在<head></head>之间！
<script language="javascript" type="text/javascript">
var $ = function(id){return document.getElementById(id)}
function menu(i)
{
	 if(i==0)
	 {
	 	$('menuList0').style.display='block';
		$('menuList1').style.display='none';
		$('menuList2').style.display='none';
		$('menuList3').style.display='none';
		$('menuList4').style.display='none';
	 }
	 else if(i==1)
	 {
	  	$('menuList0').style.display='none';
		$('menuList1').style.display='block';
		$('menuList2').style.display='none';
		$('menuList3').style.display='none';
		$('menuList4').style.display='none';
	 }
	  else if(i==2)
	 {
	  	$('menuList0').style.display='none';
		$('menuList1').style.display='none';
		$('menuList2').style.display='block';
		$('menuList3').style.display='none';
		$('menuList4').style.display='none';
	 }
	  else if(i==3)
	 {
	  	$('menuList0').style.display='none';
		$('menuList1').style.display='none';
		$('menuList2').style.display='none';
		$('menuList3').style.display='block';
		$('menuList4').style.display='none';
	 }
	  else if(i==4)
	 {
	  	$('menuList0').style.display='none';
		$('menuList1').style.display='none';
		$('menuList2').style.display='none';
		$('menuList3').style.display='none';
		$('menuList4').style.display='block';
	 }
	 else
	 {
	 alert("输入错误!");
	 }
}
</script>

 

导航菜单结构
<div class="nav">
  <ul>
    <li  οnmοuseοver="menu(0)">
      <ul  class="subnav" id="menuList0" style="display:none">
        <li>下拉菜单01</li>
        <li>下拉菜单01</li>
        <li>下拉菜单01</li>
        <li>下拉菜单01</li>
      </ul>
      <a href="#">下拉菜单一</a> </li>
    <li  οnmοuseοver="menu(1)">
      <ul  class="subnav" id="menuList1" style="display:none">
        <li>下拉菜单01</li>
        <li>下拉菜单01</li>
        <li>下拉菜单01</li>
        <li>下拉菜单01</li>
      </ul>
      <a href="#">下拉菜单二</a> </li>
    <li  οnmοuseοver="menu(2)">
      <ul  class="subnav" id="menuList2" style="display:none">
        <li>下拉菜单01</li>
        <li>下拉菜单01</li>
        <li>下拉菜单01</li>
        <li>下拉菜单01</li>
      </ul>
      <a href="#">下拉菜单三</a> </li>
    <li  οnmοuseοver="menu(3)">
      <ul  class="subnav" id="menuList3" style="display:none">
        <li>下拉菜单01</li>
        <li>下拉菜单01</li>
        <li>下拉菜单01</li>
        <li>下拉菜单01</li>
      </ul>
      <a href="#">下拉菜单四</a> </li>
    <li  οnmοuseοver="menu(4)">
      <ul  class="subnav" id="menuList4" style="display:none">
        <li>下拉菜单01</li>
        <li>下拉菜单01</li>
        <li>下拉菜单01</li>
        <li>下拉菜单01</li>
      </ul>
      <a href="#">下拉菜单五</a> </li>
  </ul>
</div>

转载于:https://www.cnblogs.com/cn-wsy/archive/2012/03/09/2387789.html

weixin_30396699
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
C语言菜单功能作用,[C语言] 实现简单的菜单式互动程序
weixin_30957307的博客
05-16 2932
1.程序编写目的编写该程序主要是为了熟悉C语言中的一些常用函数与循环语句的用法，并锻炼自己对于程序设计的逻辑，这对于初学者来说是十分必要的。需要说明的是，本次菜单互动程序为模拟银行存取款的程序2.实现该程序所需要的技术2.1常用函数printf() scanf() getchar()等具体语法：int a = 3;printf("%d",a);其中，%d用来输出整型变量(int 在64位中占4个字...
（C语言）实现菜单模块功能（二）(数组及应用)：
不吃辣的IT男
07-05 3853
菜单第1项完成： 输入一组整数，以-1作为结束的标志,用数组s接收这组数，输出数组中元素的个数和所有元素的值（规定这组数不超过100个，数组中的元素值可以重复出现;例如,输入6 9 5 4 6 7 5 6 8 6 6 2 3 -1,则元素个数为:13） 。 菜单第2项完成： 在完成第1项的基础上,输入一个整数x，将s中值等于输入值x的所有元素从数组中删除，并输出删除后元素的个数和数组元素的各个值(例如, 输入6,则结果为:个数=8 ; 数组元素为: 9 , 5, 4 , 7 ,5
易优CMS 栏目页分离调用二级栏目导航和三级栏目导航
weixin_33981932的博客
01-16 400
在使用易优cms时，遇到栏目页或者内容页二级栏目导航和三级栏目导航分开调用时，标签如何调用呢？先在公用函数文件里加一截代码，。 公用函数文件\extend\function.php打开后在底部添加下面代码/** 获取顶级栏目下是否3级，并输出指定的字符 模板使用方法：{$field.typeid|diy_arctype_level=###,输出的字符}*/function diy_arctype...
菜单选择 python 练习题
weixin_71163455的博客
06-18 307
菜单选择 答案是·学生自己所写
handsontable下拉数字递增效果vue
tingtingya_的博客
08-16 688
vue中使用handsontable实现下拉表格数据数字递增效果
jQuery响应式下拉导航菜单项.zip
07-04
JavaScript的条件语句（如`if...else`）可用于检测这些变化，并执行适当的代码来调整菜单。 9. **性能优化**：考虑到移动设备的资源限制，项目可能需要优化JavaScript代码以减少CPU和内存的消耗。例如，使用事件...
易语言用卷帘菜单做的导航工具
07-23
同时，逻辑控制语句（如if...else，for，while等）用于判断和控制菜单的显示状态。 6. **资源管理**: 菜单的图标、文字等资源在程序中也需要管理。易语言支持资源文件的加载和使用，开发者可以将资源集成到程序中，...
jquery弹性下拉图标菜单.rar
07-04
jQuery的条件语句如`if...else`可以满足这一需求。 5. **响应式设计**：现代网页通常需要适应不同设备的屏幕大小。使用jQuery，我们可以检测窗口的尺寸变化，然后根据需要调整菜单的布局和行为，以实现响应式设计。...
采用CSS和JS的下拉菜单特效代码
03-20
在网页设计中，下拉菜单是一种常见的交互元素，它能够有效地组织和展示大量的导航选项，同时节省页面空间。本主题将深入探讨如何使用CSS（层叠样式表）和JavaScript（JS）来创建具有动态效果的下拉菜单。下面我们将...
c语言课程设计_下拉菜单程序
04-10
3. **条件分支**：每个菜单项对应一个操作，可以通过`if...else if...else`语句或者`switch`语句来实现。当用户输入对应的数字时，执行相应的代码块。 4. **功能实现**：根据课程设计的需求，下拉菜单可能包含各种...
一份C语言大作业多少钱,C语言大作业：编写菜单控制猜商品价格程序
weixin_42519253的博客
05-17 359
该楼层疑似违规已被系统折叠隐藏此楼查看此楼改写猜价格游戏的程序(见下)，实现对这个游戏的一些管理功能，可以根据菜单对商品进行添加、删除、查找、浏览等操作，根据模块间数据传递的方式分析各个模块的函数原型及调用关系，并完成程序编写。商品价格要求在限定范围内取随机值。如有兴趣可以完成更多功能(不属于作业要求内容)，如：使用链表存储商品(需要对链表进行操作的一些工具函数)；商品类型中加入商品个数信息，增...
python怎么用if else_在Python中使用if和else进行菜单导航
weixin_34281191的博客
02-20 229
这是我的小菜单导航，包含if和else语句：def navigation():navigation_eingabe = int(input())if navigation_eingabe == 1:met1()if navigation_eingabe == 2:passif navigation_eingabe == 3:passif navigation_eingabe == 4:passif...
使用for if else语句做导航下拉菜单
weixin_30735745的博客
03-09 133
导航菜单框架css样式<style type="text/css"><!--body, td, th {font-size: 12px;margin:30px;padding:0;}a {color:#000000;text-decoration:none;}a:hover {color:#FF0000;}ul, li {margin:0;padding:0;}ul, ...
SQL语句中，如何使用含有if....else...判断语句
热门推荐
dream317
12-01 2万+
在我们开发中，有时要对数据库中的数据按照条件进行查询，用到if else类似的语句进行判断，那么if else语句只有在存储过程，触发器之类的才有，但是要在sql上当满足某种条件上要取不同的字段值，刚开始我还不会，最后查了资料，发现使用case when语句就可以解决，而且各种数据库都支持。 语法： case when 条件1 then 结果1 when 条件2 then 结果2 else ...
编写一个图形用户界面，实现菜单的功能。
Lili Liang的博客
05-13 8440
题目： 编写一个图形用户界面，实现菜单的功能。有3个一级菜单项：File、Edit和Help。在File菜单项中，有3个二级菜单项：New、Open和Save。在Edit菜单项中，有3个二级菜单项：Copy、Cut和Paste。在Help菜单项中，有一个二级菜单项About。对于每一个二级菜单项，不必真正实现其功能，只要演示它能响应鼠标单击事件即可，如弹出一个对话框或打印一句话。 impor...
第4章 用if语句实现选择结构
qq_44616178的博客
02-22 375
标题 例4.2 输入两个实数，按由小到大的顺序输出这两个数 #include&lt;stdio.h&gt; int main() { float a,b,t; scanf("%f,%f,"&amp;a,&amp;b); if(a&gt;b) {t=a; a=b; b=t; } printf("%5.2f,%5.2f\n",a,b); return 0; } 运行结果 ![在这里插入图片描述](h...
vba复合框下拉菜单
最新发布
01-08
VBA复合框下拉菜单是一种在Excel中使用VBA编程语言创建的功能，在使用过程中可以通过下拉菜单选择不同的选项。下面是一个简单的示例，以帮助理解VBA复合框下拉菜单的用法。 首先，在Excel中创建一个表格，并在某个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值