作者：ybcola 这段js代码是很久以前的作品了，应该在一年以前吧！当时是在做一个农村人才管理系统的时候遇到的问题，因为系统要求参选择并通过后台添加省市区县甚至到乡镇村队，而在对人才的信息进行修改时要求用下拉列表进行选择，并且每个人才来源可能是省市，或者省市区县，或者一直取队都要选择！那时第一反映就是找网上是否有现成的代码，找到一个最常用的就是省市二级联动，那时那段js代码在网上随处可见，可是拿过来对我来说...
省市二级联动下拉菜单,增加了区号输入.多组选项共用一组数据. 选择地区,可以获取区号,填写区号自动选取地区. 某些地市的区号收集中. 省份 选择城区 1)inti(0);findarea();"> 省份 选择城区 1)inti(1);findarea();"> var areaList={ "北京":[["选择城区","10"],["东城区",""],["西城区",""],["崇文区",""],["宣武区",""],["朝阳区",""],["丰台区",""],["石景山区",""],["海淀区",""],["门头沟区",""],["房山区",""],["通州区",""],...
现在的下拉菜单是兼容性越来越好了，不用js的最好了，但如果能用最少的代码实现出效果，也是不错的第一个，用到的js,不过很短，也很明了*{font:normal normal 14px/1.5em "宋体";} li{list-style:none;} span{display:block;line-height:25px;} a{text-decoration:none;display:block;margin:5px;} .class1{ width:100px; height:25px; overflow-y:hidden; border:1px solid #ffe663; text-align:center; background:#ff...
网上收集整合出来的，算是剽窃吧，IE6下用过，其他的没试。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- by shundyang --> <HTML><HEAD><TITLE>SHARE</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <style> BODY { MARGIN: 0px; } A.notes { FONT-SIZE: 12px; COLOR: #ffffff; TEXT-DECORATION: none } .MS_link0 { BORDER-RIGHT: #1e77d3 1px solid; PA...
代码如下:function JObj(){} JObj.$c = function(tag){return document.createElement(tag)}; JObj.$ = function(id){return document.getElementById(id)}; JObj.isRate = function(pRateString){ if(!isNaN(pRateString)) return false; if(pRateString.substr(pRateString.length-1,1) != "%") return false; if(isNaN(pRateString.substring(0,pRateString.length - 1))) return false; retur...
要完成此效果把如下代码加入到区域中 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
优点：点击body区域同样可以隐藏下拉菜单，且不会和body已有的onclick事件冲突。 缺点：请大家指出，虚心接受！运行框代码看似繁多，实属无奈，请下载附件，以便更好观察或修改~！ 下拉菜单 body{margin:20px auto;font-family:Arial, Helvetica, sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa; position:relative;padding:10px;} ul{margin:0;padding:0;list-style:none;} .dropDownList{position...
JavaScript下拉菜单 * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:small; } #navigation, #navigation li ul { list-style-type:none; } #navigation { margin:20px; } #navigation li { float:left; text-align:center; position:relative; } #navigation li a:link, #navigation li a:visited { display:block; text-decoration:none; color:#000; width:120px; heig...
css菜单演示 0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; // 产品介绍...
JavaScript下拉菜单 * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:small; } #navigation, #navigation li ul { list-style-type:none; } #navigation { margin:40px; }/*可有可无属性，是内容与边的距离*/ #navigation li { float:left; text-align:center; position:relative;/*position:relative一定要写，是下面的链接相对它绝对定位*/ } #navigation li a:link, #naviga...
这里主要是利目标在鼠标经过时（.hover()）利用slideToggle() 、slideUp()来显示原来隐藏着的内容： 代码如下: $(function(){ $(".dropdown").hover( function(){ $("li ul").slideToggle(800);}, function(){$("li ul").slideUp(1000)} ) }) 代码如下: jQuery 渐变下来效果 a{text-decoration:none;color:#333;} a:hover{color:#f33;} a.gr{color:#227CE8;} a.xg{color:#f30;} a.zx{color:#690;} a.yd{color:#f00;} a.more-...
jquery 代码如下: $(document).ready(function(){ $("ul li").hover(function(){ $(this).find("ul:first").show();//鼠标滑过查找li下面的第一个ul然后显示； },function(){ $(this).find("ul:first").hide();//鼠标离开隐藏li下面d的ul； }) $("ul li ul li ul").prev().addClass("bbb");//给li下面ul是aaa的样式的前一个同辈元素添加css； }) css 代码如下: ul, li{padding:0;margin:0;} ul li{float:left;;margin-right:1px...
*{padding:0;margin:0;} .nav{width:850px;margin:50px auto;position:relative;} .nav li{display:inline;margin-right:50px;} .nav ol{background-color:#f5f5f5;border:1px solid #ccc;display:none;padding:15px;} .nav ol li{display:block;margin-bottom:15px;} var next=function (el) { do { el = el.nextSibling; } while ( el && el.nodeType != 1 ); return el; } var showContent=function (el) { var _nex...
本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的，当然还有更为复杂的二级菜单，不过先学会如何制作简单的，分享给大家供大家参考，具体内容如下 代码如下：下拉菜单nav a{ text-decoration:none; } nav>ul>li{ float:left; text-align:center; padding:0 0.5em;width:120px; } nav li ul.sub-menu{ display:none; padding-left:0 !important; } .sub-menu li{color:white;} .sub-menu li:hover{background-col...
本文给大家介绍使用js实现下拉菜单可选择互相移动并实现菜单排序，代码简单易懂，具有参考价值，先给大家展示下效果图，感觉还很满意请参考本段代码。 代码如下：使用Javascript实现选择下拉菜单互移并排序选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。 function moveOption(e1, e2) { try { for (var i = 0; i 0) { obj.options(obj.selectedIndex).swapNode(obj.options(obj....