本文实例讲述了jQuery实现幻树形下拉菜单特效,实现自动伸缩,分享给大家供大家参考。 运行jQuery树形下拉菜单特效效果图:为大家分享的jQuery树形下拉菜单代码如下<head><title>常用的jquery下拉菜单</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript">$(document).ready(function() {$(".menuTitle").click(function(){$(this).next("div").slideToggle("slow").siblings("....
最近身体不适,所以没能如期的更新,抱歉。这里直接把代码贴上,如果有不明白的地方,留言就行。 <!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><title>下拉菜单</title><meta http-equiv="content-Type" content="text/html;charset=utf-8"><style type="text/css">.navi ul {padding: 0;list-...
1.创建Option对象1.1 var optionEle1 = document.createElement(option);1.2 var optionEle2 = new Option(text, value, defaultSelected, selected); 2.options属性2.1 select.options返回select标签下面的Option对象的集合 3.清空下拉菜单3.1 利用for循环删除,注意数组长度的动态变化3.2 select.options.length = 0; 4.应用<html> <head> <script language="javascript"> function number(){ var obj = document.getElementB...
html代码<div class="UpLayer"> <dl> <dt> <a href="javascript:void(0)">脚本之家</a></dt> <dd> <a href="http://www.demo.com/js/">特效</a> <a href="http://www.demo.com/Tutorials/">教程</a> <a href="http://www.demo.com/zy/">资源</a> <a href="http://www.demo.com/mb/">模板</a> <a href="http://www.demo.com/news/">资讯</a></dd> </dl> </div> js代码<script type="text/javascript"> // 【经典】弹出层菜单 $(d...
这是一款精美的多级下拉菜单美化,可以完美替代“select”来实现下拉菜单的效果。而且支持多级菜单,有加载等待效果,有层级分类展示。代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Filament Group Lab</title> <meta http-equiv="content-type" content="text/html; char...
本文实例讲述了jQuery实现渐变下拉菜单的简单方法。分享给大家供大家参考。具体实现方法如下:代码如下:<script type="text/javascript"> $(function(){ $("#nav li").hover(function(){if(!$(this).children("#nav li ul").is(":animated")){$(this).children("#nav li ul").fadeIn("100");}},function(){$(this).children("#nav li ul").fadeOut("400");});//willin }) </script> #nav li {float:left; line-hei...
本文实例讲述了javascript实现多级联动下拉菜单的方法。分享给大家供大家参考。具体实现方法如下:代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var arrItems1 = new Array(); var arrItemsGrp1 = new Array(); arrItems1[3] = "列二"; arrItemsGrp1[3] = 1; arrItems1[4] = "列二三"; arrItemsGrp1[4] = 1; arrItems1[5] = "列二四"; arrItemsGrp1[5] = 1; arrItems1[6] = "列三"; arrItemsGrp1[6] = 2; arrItems1[7] = ...
本文实例讲述了js使用DOM设置单选按钮、复选框及下拉菜单的方法。分享给大家供大家参考。具体实现方法如下: 1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个。每一个都有checked属性,当一项选择为ture时,其它的都变为false. 先贴上一个例子:代码如下:<script type="text/javascript"> function getChoice() { var oForm = document.forms["uForm1"]; var aChoices ...
Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能; 首先肯定要在页面引用jquery.js 版本不限 ; 接下来把=====================html贴出来:代码如下: <div class=”header_menu”> <ul> <li class=”menuli” id=”xtgl_menu”>系统管理</li> <li class=”menuli” id=”ggsq_menu”>干管所勤</li> <li class=”menuli” id=”b...
首先声明: 本人虽然在web前端岗位干了好多年,但无奈岗位对技术要求不高。html,css用的比较多,JavaScript自己原创的很少,基本都是copy修改,所以自己真正动手写时,发现基础很不牢固,边学习边实践,收获很大。 效果图:不废话了,贴码了 1、css代码代码如下: a:link{color:white;text-decoration:none;} a:visited{color:white;text-decorative:none;} a:hover{color:white;text-decorative:none;} a:active{color:white;te...
这个下拉菜单式可以循环的使用jquery实现,很实用,喜欢的朋友可以参考下<select name="paymerid" id="paymerid" style="width: 155px;"> <option value="" >--请选择--</option> <c:forEach var="unionconfig" items="${unionconfiglist}"> <option value="${unionconfig.merid}">${unionconfig.merid}</option> </c:forEach> </select>
JQuery获取和设置Select选项 获取Select : 获取select 选中的 text : $(“#ddlRegType”).find(“option:selected”).text(); 获取select选中的 value: $(“#ddlRegType “).val(); 获取select选中的索引: $(“#ddlRegType “).get(0).selectedIndex; 设置select: 设置select 选中的索引: $(“#ddlRegType “).get(0).selectedIndex=index;//index为索引值 设置select 选中的value: $(“#ddlRegType “).attr(“value”,”Norma...
代码如下:<span style="font-size:14px;"><!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> <meta http-equiv="content-type" content="texthtml;charset=utf-8"> <title>Menu</title> <style type="text/css"> #nav { list-style: none; text-align: center; } #nav li { float: left; width: 1...
用jquery实现的一个超级简单的下拉菜单。 效果图 初始效果 鼠标悬浮效果 代码 代码如下:<!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-1.11.1.js"></script> <style> nav a { text-decoration: none; } nav > ul > li { float: left; text-align: center; padding: 0 0.5em; } nav li ul.sub-menu { display: none; padding-left: 0 !important; } .sub-menu li { color: white; } .sub-menu li:h...
代码如下:<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8" %> <HTML> <HEAD> <title>WebForm5</title> <style>/* Root = Horizontal, Secondary = Vertical */ ul#navmenu-h { margin: 0; border: 0 none; padding: 0; width: 500px; /*For KHTML*/ list-style: none; height: 24px; } ul#navmenu-h li { margin: 0; border: 0 none; padding: 0; float: left; /*For Gecko*/ display: inline; list-style: n...