javascript模拟菜单

最新推荐文章于 2019-09-27 16:11:42 发布
最新推荐文章于 2019-09-27 16:11:42 发布
阅读量629 收藏
点赞数
分类专栏： 11_js 12_html 文章标签： javascript function class html 产品 百度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tengdazhang770960436/article/details/6943240
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style type="text/css">
        .out{display: none;}
        .over{
            list-style: none;
            position: absolute;
            left: 10px;
            top:33px;
            border-bottom: 3px #036 solid;
            display: block;
        }
    </style>
    <script type="text/javascript">
        function getById(id) {
            return document.getElementById(id);
        }

        function listToggle() {
            var pro=getById("id1");
            var dis=pro.getAttribute('dis');
            if(dis=='out') {
                pro.className='over';
                pro.setAttribute('dis','over')
            } else if(dis=='over') {
                pro.className='out';
                pro.setAttribute('dis','out')
            }
        }
    </script>
</head>
<body>
<!--当鼠标移动到"公司产品"文字上后,显示出下面的分类菜单-->
<ul class="navul">
    <!--onmouseover,onmouseout事件中通过改变id1的className来改变ul元素样式-->
    <li οnclick="listToggle()">公司产品</li>
    <ul id="id1" class="out" dis="out">
        <li><a href="#">百度</a></li>
        <li><a href="#">谷歌</a></li>
        <li><a href="#">bing</a></li>
        <li><a href="#">有道</a></li>
        <li><a href="#">狗狗</a></li>
    </ul>

</ul>

</body>
</html>

信行合一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现级联菜单
java_zb的专栏
03-16 1933
<br />下面是一个级联菜单的实现案例：<br /> <br />选择广东省之后，在第二个下拉菜单就会显示相应的城市名称：<br /> <br />当你选择了某个城市之后，如果在这个市里还其他的地区就会再次出现一个下拉菜单：<br /> <br /> <br /> <br /> <br /> <br />第三个下拉菜单就是对应的区域：<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />下面就是相应的js代码：<br /> <br /><script
用JavaScript制作菜单
zhj的博客
05-19 1152
用mouseover和mouseout代替css的hover功能 通过闭包和addEventListener设置鼠标mouseover和mouseout事件：循环执行函数(function(ind){})(i)来绑定每个菜单项的事件 for (var i = 0; i < y1.length; i++) { y1[i].addEventListener("mouseover"...
html之小特效（吸顶菜单、选项卡、轮播图、模拟时钟。。。）
折戟沉沙
09-19 2146
asdasd
css3 勾 叉，勾模拟手机菜单 三横杠,左右
林中明月间丶
05-18 1975
html： <button class="destroy" ></button> css3： .todo-list li .destroy { display: block; position: absolute; top: 0; right: 10px; bottom: 0; width: 40px; he...
JavaScript模拟下拉菜单代码
10-30
在JavaScript编程中，模拟...总结来说，这个JavaScript模拟下拉菜单的案例涵盖了HTML结构、CSS样式设计以及JavaScript交互实现。通过这样的实践，开发者可以更好地理解和掌握Web前端开发中的动态交互和响应式设计技术。
JavaScript模拟鼠标右键菜单效果
11-22
在JavaScript编程中，模拟鼠标右键菜单是一种常见的需求，它允许开发者自定义浏览器默认的右键弹出菜单，提供更加个性化的用户体验。本实例将详细讲解如何使用JavaScript实现这一功能。 首先，我们要创建一个HTML...
JavaScript简单下拉菜单实例代码
10-23
收起菜单时，使用`setTimeout`来延迟执行收起操作，模拟出一个渐隐的效果。 这个实例展示了如何结合JavaScript和CSS来创建具有交互性的下拉菜单，并通过定时器和递归调用来实现平滑的动画过渡。这种技术可以适应...
input 中 radio的使用
热门推荐
彻底拆分，一切可控！
10-20 4万+
在使用input的radio元素的时候,需要特别注意的一点是它的顺序,如果不注意顺序的话,那你就会被它该搞死的.如下所示:                 function select1() {             document.getElementsByName("b")[0].checked = true;             alert(document.
html验证码生成
彻底拆分，一切可控！
03-12 2万+
生成验证码 function createCode(len) { var seed = new Array( 'abcdefghijklmnopqrstuvwxyz', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
javascript 获取鼠标点击的元素
彻底拆分，一切可控！
04-15 2万+
Untitled Document function show_element(e){ if(!e){ var e = window.event; } //获取事件点击元素 var targ = e.target; //获取元素名称 var tname = ta
v-chart 自定义显示格式
彻底拆分，一切可控！
03-26 1万+
v-charts 文档： https://v-charts.js.org/#/line 1.settings 设置双 y 轴 2.设置数字显示到折线上，并且显示为 xx% 格式 使用formatter 函数 formatter: function(params){ console.log(params) if(params.seriesIndex == 2){ str =...
jquery flot 在节点上显示提示
彻底拆分，一切可控！
08-27 9189
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8&
jquery操作textarea
彻底拆分，一切可控！
10-26 7497
只看例子就明白了                     function setValue() {             $("#aa").attr("value","aaaa");         }         function resetValue() {              $("#aa").val("");         }
JavaScript 初始化函数 以及加载顺序
彻底拆分，一切可控！
08-13 7304
加载顺序 ;(function(){}()); &gt; $(function()function()） &gt; window.onload &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&amp
flot 自定义显示日期
彻底拆分，一切可控！
10-17 7289
html 代码：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charse
ajax 302 错误无法跳转
彻底拆分，一切可控！
09-27 7070
1.问题当cas登录失败之后如果继续执行ajax请求会报 302 重定向错误，但是因为是ajax请求，所以浏览器不会自动跳转，需要做处理。 1.自己重写ajax方法：不推荐 var Ajax = function() { var that = this; // 创建异步请求对象方法 that.createXHR = function() { if (wind...
浏览器中引入vue 和 ant-design
彻底拆分，一切可控！
09-02 7031
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link type="text/css" rel="stylesheet" href="./css/antd.min.css"/...
正则表达式验证中文或者英文
彻底拆分，一切可控！
03-15 6943
正则表达式验证中文或者英文 var Dada = {}; Dada = { $:function (id) { return document.getElementById(id); }, ok:function () {
JavaScript实战：模拟登录、菜单控制与全选功能
1. **模拟126邮箱自动登录提示功能** 在这个案例中，JS被用来实现鼠标悬停时显示一个提示信息（"请注意使用！"）的功能。当用户鼠标移动到"自动登录"复选框上时，提示框（`#div1`）显示，移出时隐藏。这展示了如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值