一个级联菜单代码学习及removeClass与addClass的应用

最近在学些web前段的知识，看见博客园首页左侧的一个级联菜单，就想写一个demo.呵呵


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
*
{
padding: 0px;
margin: 0px;
}
.dis_none
{
display: none;
}
.dis_block
{
display: block;
}
.subSheet
{
position: absolute;
left: 100px;
z-index: 10;
width: 100px;
}
ul
{
list-style: none;
}
li
{
border: 1px solid blue;
width: 100px;
background-color: Gray;
}
li a
{
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li onmousemove="mouse_over(1010)" onmouseout="mouse_out(1010)"><a href="">.NET精华区</a>
<div class="subSheet dis_none" id="1010">
<ul>
<li><a href="">新手入门</a></li>
<li><a href="">托管代码</a></li>
<li><a href="">非托管代码</a></li>
</ul>
</div>
</li>
<li onmousemove="mouse_over(1011)" onmouseout="mouse_out(1011)"><a href="">嵌入式</a>
<div class="subSheet dis_none" id="1011">
<ul>
<li><a href="">新手入门</a></li>
<li><a href="">嵌入式入门</a></li>
<li><a href="">嵌入式进阶</a></li>
</ul>
</div>
</li>
<li onmousemove="mouse_over(1012)" onmouseout="mouse_out(1012)"><a href="">单片机</a>
<div class="subSheet dis_none" id="1012">
<ul>
<li><a href="">新手入门</a></li>
<li><a href="">单片机入门</a></li>
<li><a href="">单片机进阶</a></li>
</ul>
</div>
</li>
<li><a href="">软件测试</a></li>
</ul>
</div>
</form>
</body>
</html>
<script src="Scripts/jquery-1.6.3.js" type="text/javascript"></script>
<script type="text/javascript">
function mouse_over(i) {
$("#" + i).removeClass("dis_none");
}
function mouse_out(i) {
$("#" + i).addClass("dis_none");
}
</script>

赞 (0)

相关推荐

  • js实现addClass,removeClass,hasClass的函数代码

    复制代码 代码如下: function hasClass(ele,cls) { return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); } function addClass(ele,cls) { if (!this.hasClass(ele,cls)) ele.className += " "+cls; } function removeClass(ele,cls) { if (hasClass(ele,cls

  • 使用JS实现jQuery的addClass, removeClass, hasClass函数功能

    废话不多说,直接上代码 复制代码 代码如下: function addClass(obj, cls){     var obj_class = obj.className,//获取 class 内容.     blank = (obj_class != '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.     added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.     obj

  • javascript自定义的addClass()方法

    复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClassName+= " "; newClassName+= value ; element.className = newClassN

  • Jquery.addClass始终无效原因分析

    setAdminTabs.js代码中添加如下: 复制代码 代码如下: $("#adminTabs li").mouseover(function(){$(this).addClass("selectedTab")}); 始终不起作用,原因如下: 复制代码 代码如下: .selectedTab{background-color:White; border-bottom:1px} 定义两个属性,在admin.css的文件中存在,如下: 复制代码 代码如下: #admin

  • 一个级联菜单代码学习及removeClass与addClass的应用

    最近在学些web前段的知识,看见博客园首页左侧的一个级联菜单,就想写一个demo.呵呵 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • js实现网页多级级联菜单代码

    js实现网页多级级联菜单代码

    本文实例讲述了js实现网页多级级联菜单.分享给大家供大家参考.具体如下: 这是大家在网页上经常会见到的级联菜单特效,不过这一个代码是由JS来实现,将级联菜单中的内容保存在了JS数组中,为了页面美观,本次还美化了一下表格边框,整体看上去更和谐实用了,多级的下拉菜单对网页设计来说比较实用. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-select-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML

  • 一个级联菜单(IE ONLY),不过代码很精简!

    无限级联下拉框 = 0;i--){ obj.options[i] = null; } } // 选中匹配项 function ddl_selected(ddl_name,match_val,isValue){ var obj = document.getElementById(ddl_name); for( var i = 0; i 城市: 地区: 片区: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • asp动态级联菜单代码

    JS脚本: <% dim rs dim sql dim count dim rs1 dim sql1 sql = "select * from region order by zoneid asc" set rs = server.createobject("adodb.recordset") rs.open sql,conn,1,3 %> <script language = "JavaScript"> var onec

  • jQuery实现可收缩展开的级联菜单实例代码

    如果用纯JavaScript代码而不使用框架的话,那么做一个级联菜单也许是一件让人生畏的事情,但有了框架,这件事情就很容易了,这就是框架的好处,极大地提高了开发效率,并且更可靠和易于维护.使用jQuery来实现级联菜单的一般步骤如下: •1.首先使用<ul>和<li>创建一个级联菜单  复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "

  • 在Angular中实现一个级联效果的下拉框的示例代码

    实现一个具有级联效果的下拉搜索框,实现的结果如下图所示 我们主要通过这个组件,来学习一些细微的逻辑,比如: 如何计算input框内文字的长度: 如何获取光标的位置:如何实现滚动条随着上下键盘的按动进行移动...... 具体需求如下 级联搜索最多不超过三级,以"."作为级联搜索的连接符 搜索框跟着文本框中的"."进行向后移动,向右移动的最大距离不能超过文本框的宽度 当用户修改之前的级联内容,则不进行搜索,并隐藏搜索框:若用户在之前输入的是".",

  • jquery 无限级联菜单案例分享

    看到phpcms的地区级联菜单,感觉写的挺有意思,就说说大致步骤,省得忘了. 对于地区级联菜单的生成一般是在/data/cache_model/content_form.class.php文件的areaid()函数中.不过,这个只是一个cache至于什么地方生成还不没找到,所以暂时作为一个测试.(知道的同学告诉我哈!十分感谢) 在areaid()的$js中添加 复制代码 代码如下: function delChild(num) { $('#load_$field select').each(fu

  • jQuery实现级联菜单效果(仿淘宝首页菜单动画)

    相信初学HTM+DIV+CSSl的同学们肯定也想做出淘宝网首页的菜单动画吧.今天我们就带大家体会一下级联菜单的显示.小编我只是实现了简单地效果,不过总体来说原理是一样的哦,那么先让大家看看效果图吧. 那么要实现这个效果我们当然要使用到的是jQuery,那么我就开始讲解怎么做的了,先上html和css的代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>menu.html</title> <m

  • 简单实现jQuery级联菜单

    简单实现jQuery级联菜单

    本文实例为大家分享了jQuery实现级联菜单的具体代码,供大家参考,具体内容如下 层叠样式表: .button { border: 1px ridge #ffffff; line-height:18px; height: 20px; width: 45px; padding-top: 0px; background:#CBDAF7; color:#000000; font-size: 9pt; } HTML正文: <div style="border:1px dashed #E6E6E6;

  • 前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例

    前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 CasMenu.aspx页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

随机推荐