联动菜单

最新推荐文章于 2024-08-26 04:01:33 发布
原创 最新推荐文章于 2024-08-26 04:01:33 发布 · 532 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#border #class #function #table

本文介绍了一个使用JavaScript实现的图片悬停显示不同内容的效果。当鼠标悬停在不同的图片上时，会触发相应的JavaScript函数改变页面元素的显示状态，并跳转到特定的链接。

js部分

 function over()
    {
        document.getElementById("ywxx").style.display="none";
        document.getElementById("zxgz").style.display="block";
        document.getElementById("rdzt").style.display="none";
        //document.getElementById("yw").src="images/index_22xx1.gif";
        //document.getElementById("zx").src="images/index_22zx.gif";
        document.getElementById("hl").href="LaborSupervise/PunishAndCreditList.aspx?TypeId=21";
    }
   
    function out()
    {
        document.getElementById("ywxx").style.display="block";
        document.getElementById("zxgz").style.display="none";
        document.getElementById("rdzt").style.display="none";
        //document.getElementById("yw").src="images/index_22xx.gif";
        //document.getElementById("zx").src="images/index_22zx2.gif";
        document.getElementById("hl").href="MineAndOperationArticle/ArticleListTWO.aspx?type=2";
    }
    function move()
    {
        document.getElementById("ywxx").style.display="none";
        document.getElementById("zxgz").style.display="none";
        document.getElementById("rdzt").style.display="block";
        //document.getElementById("yw").src="images/index_22xx.gif";
        //document.getElementById("zx").src="images/index_22zx2.gif";
        document.getElementById("hl").href="Default.aspx";
    }

源码

 <td class="ch12" style="width: 550px; height: 32px;" background="images/index_220bj.gif">
                                                            <img id="yw" src="images/1.gif" onmouseover="out()" /><img id="zx" src="images/2.gif"
                                                                onmouseover="over()" /><img id="rd" src="images/3.gif" onmouseover="move()"/>
                                                        </td>

特效

<tr id="zxgz" style="display:none;">
                                                        <td width="127" style="height: 123px">
                                                            <table width="110" height="79" border="0" cellpadding="0" cellspacing="0">
                                                                <tr>
                                                                    <td width="105" background="images/index_48.gif">
                                                                        <table width="90" height="79" border="0" align="center" cellpadding="0" cellspacing="0">
                                                                            <tr>
                                                                                <td width="90" height="58" align="center">
                                                                                    <a href="LaborSupervise/PunishAndCreditList.aspx?TypeId=21" class="hs12">
                                                                                        <img src="images/bszx_01.gif" border="0" width="68" height="52"></a></td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td height="15" align="center" valign="middle" class="hs12">
                                                                                    <a href="LaborSupervise/PunishAndCreditList.aspx?TypeId=21" class="hs12">第二次土地调查</a></td>
                                                                            </tr>
                                                                        </table>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                        <td width="127" colspan="5">
                                                            <table width="110" height="79" border="0" cellpadding="0" cellspacing="0">
                                                                <tr>
                                                                    <td width="105" background="images/index_48.gif">
                                                                        <table width="80" height="79" border="0" align="center" cellpadding="0" cellspacing="0">
                                                                            <tr>
                                                                                <td width="80" align="left" style="height: 58px">
                                                                                    <a href="LaborSupervise/PunishAndCreditList.aspx?TypeId=25" class="hs12">
                                                                                        <img src="images/bszx_02.gif" border="0" width="68" height="52"></a></td>
                                                                            </tr>
                                                                            <tr align="center">
                                                                                <td height="15" align="center" valign="middle" class="hs12">
                                                                                    <a href="LaborSupervise/PunishAndCreditList.aspx?TypeId=25" class="hs12">&nbsp;&nbsp;金土工程</a></td>
                                                                            </tr>
                                                                        </table>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>

【excel】设置二级可变联动菜单
weixin_43416960的博客
05-31 1万+
之前做完了，开始做二级联动菜单。
基于jQuery的省市县三级联动菜单
大风暴孤独感的博客
09-25 615
在生活中，我们时常会填写个人信息表等类似的表，里面通常有你的籍贯、户籍所在地等地址填写内容。大致就是让你填，你家在某某省某某市某某县。在网络中，我们填写时，基本上都是在网页上出现三个并排下拉框，由省至县依次选择。今天给大家介绍一版基于jQuery的省市县三级联动菜单。 说到这，大家自然会想到某某省有某某市有某某县，很好。但大家是否有建立对应的数据代码呢？ var provinces =['山西'...
Android 二级联动菜单
weixin_30099269的博客
08-26 219
我整理的一些关于【XML】的项目学习资料（附讲解～～）和大家一起分享、学习一下：https://d.51cto.com/Hpqqk2Android 二级联动菜单的实现 在Android开发中，二级联动菜单是一种常见的用户界面设计模式，通常用于展示依赖关系的数据层级，如省市选择、分类选择等。本文将通过示例代码介绍如何实现一...
php一菜单联动,phpcms联动菜单如何使用
weixin_39638057的博客
04-03 190
phpcms联动菜单如何使用在phpcms中，联动菜单的管理位置位于“后台-扩展-联动菜单”支持自定义添加，联动菜单一般有使用用法：一、在数据模型中创建自定义字段时，字段类型设置为“联动菜单”然后在“菜单id”选项处通过联动菜单列表选择你的地区联动菜单，并可设定联动菜单的返回值的方式。然后在内容添加编辑界面可出现此联动菜单项，此方法常用。二、在phpcms模板中直接调用联动菜单，此方法不常用。具体...
在Excel中实现多级联动菜单
热门推荐
ysmlgr的博客
06-02 1万+
在Excel中 以省份、城市、区县为例，建立三级联动下拉框
三级联动菜单
Irene1991的博客
02-01 914
三级联动菜单正确实现原理 1、一级菜单默认全部，即页面加载时就有选项值（后端同步循环填入，或，前端ajax填入）； 2、用户点击（change）一级菜单，ajax填入二级菜单的内容； 3、用户点击二级菜单，ajax填入三级菜单的内容； 错误思路 1、一级菜单默认全部； 2、用户点击（click）二级菜单，填入二级菜单内容; 3、用户点击三级菜单，填入三
ajax实现多级联动菜单,jquery 实现二级/三级/多级联动菜单的思路及代码
weixin_36018419的博客
08-05 588
本文介绍使用jquery的AJAX功能和asp.net来实现省市区的三级联动效果，其他二级、三级或多级联动也可以按照此方法完成。文章中涉及到的数据表为City,为方便管理。设计此表如下ID：自增长字段City_Name:城市名称City_Code:城市代码我们根据城市代码来查询省、市、区。城市代码结构大致如下：内蒙古：150000，呼和浩特：150100，新城区：150101。其他地区代码与此一样...
php jquery 级联菜单,jQuery插件实现多级联动菜单效果_jquery
weixin_36429576的博客
03-11 344
开发中，有好多地方用到联动菜单，以前每次遇到联动菜单的时候都去重新写，代码重用率很低，前几天又遇到联动菜单的问题，总结了下，发现可以开发一个联动菜单的功能，以后想用的时候就方便多了。项目中每个页面都有引用jQuery，，开发个jQuery联动菜单插件，说动手就动手，下面跟大家分享分享。我用的jQuery插件方式(function($){$.fn.casmenu=function(argvs){//...
【微信小程序】联动菜单（左右侧菜单）实现
xiaobaizaza_Ry的博客
05-17 5326
联动菜单（左右侧菜单）实现【微信小程序】 最近为了实现课程设计，也做了一些前端的东西，今天想要做一个联动菜单来实现一些功能。实现了，也来做做笔记。 第1步：了解一下 左右侧菜单其实简单来讲就是把一个区域分成左右两个部分。关于组件，我觉得可以直接去微信开发文档看。通过代码，我觉得应该是可以理解的。话步多讲，直接上代码。（首先说明一点的是，我还是个刚刚接触前端的小白，可能有些写得不太好得，往各位博友多多指出改进得建议，相互学习） 第2步：实现（代码我有注释） 在这里插入代码片 ...
phpcms v9后台二开三级联动菜单的调用方法
青茶
06-12 704
前台调用联动和后台内容模型里调用联动，只需要在模型字段设置里面选择联动菜单类型设置即可，这里就不讲这个用法了，我这里讲的是后台二开的时候表单用到联动菜单地区怎么加上这个功能。联动菜单地区：后台->扩展->联动菜单调用代码：{menu_linkage(1,'L_1')}1.后台二开表单地区联动菜单代码： 后台表单地区效果图：2.表单提交后，但是存储的地区数据是一串数字1234，列表显示是数字怎么办？这就是因为地区联动存储是数字，列表显示需要对应的数字转换为文字，联动菜单数字显示文字代码：{get_link
饿了么联动菜单效果
06-01
首先，`饿了么联动菜单效果`这个标题暗示我们要创建的页面将具有类似饿了么应用的交互功能，尤其是菜单之间的关联性和动态更新。这种联动通常体现在菜品分类和子菜品的展示上，当用户选择某一类别时，页面会自动更新...
jQuery商品发布三级联动菜单代码.zip
09-23
《jQuery商品发布三级联动菜单代码详解》 在Web开发中，联动菜单是一种常见的交互设计，它通常用于导航或数据选择，特别是在商品发布系统中。这种菜单可以实现父级选项变化时，子级选项自动更新的效果，提升用户...
JS城市联动菜单.rar
07-04
《JS城市联动菜单详解》 在网页设计中，城市联动菜单是一种常见的交互元素，它能够为用户提供更加便捷的地域选择体验。JS（JavaScript）作为网页动态效果的主要驱动力，是实现这种功能的理想选择。本文将深入探讨JS...
java实现的二级联动菜单效果
09-01
在Java Web开发中，二级联动菜单是一种常见的交互设计，它允许用户通过选择一级菜单来触发二级菜单的内容更新，常用于地区选择、分类筛选等场景。本篇将详细讲解如何使用Java实现这种效果。 首先，二级联动菜单的...
仿淘宝商品发布三级联动菜单
11-10
在IT行业中，尤其是在前端开发领域，"仿淘宝商品发布三级联动菜单"是一个常见的需求，它涉及到用户界面（UI）设计、交互逻辑以及响应式网页技术。这个项目是基于H5（HTML5）编写的，目的是为了创建一个与淘宝网站...
永磁同步电机矢量控制算法优化与仿真验证研究.docx
09-05
永磁同步电机矢量控制算法优化与仿真验证研究.docx
perl-Hash-StoredIterator-0.008-12.el8.tar.gz
最新发布
09-05
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
Multisim软件在音频功率放大器设计与仿真中的应用探讨.docx
09-05
Multisim软件在音频功率放大器设计与仿真中的应用探讨.docx
生成式人工智能金融服务的风险与治理探讨.docx
09-05
生成式人工智能金融服务的风险与治理探讨.docx
构建多级联动菜单的JavaScript技巧
多级联动菜单是一种在Web页面上常见的交互式导航组件，它允许用户通过选择一个菜单项来更新或显示另一个菜单的内容。这种菜单在实现上通常需要依赖于JavaScript技术，并且为了达到良好的用户体验，还会结合CSS进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值