JavaScript题目 详解，每一步什么意思
详解，每一步什么意思<scripttype="text/javascript">//BeginvarF={};//创建一个对象F.$=function(id){retur...
详解，每一步什么意思
<script type="text/javascript">
//Begin
var F = {};//创建一个对象
F.$ = function( id ){
return document.getElementById( id);
};
F.tag = function( elem , tagName ){
return elem.getElementsByTagName( tagName );
};
F.hasClass = function(e, c) {
if (typeof e == "string") e = document.getElementById(e);
var classes = e.className;
if (!classes) return false;
if (classes == c) return true;
return e.className.search("\\b" + c + "\\b") != -1;
};
F.addClass = function(e, c) {
if (typeof e == "string") e = document.getElementById(e);
if (F.hasClass(e, c)) return;
if (e.className) c = " " + c;
e.className += c;
};
F.removeClass = function(e, c) {
if (typeof e == "string") e = document.getElementById(e);
e.className = e.className.replace(new RegExp("\\b"+ c+"\\b\\s*", "g"), "");
};
//End
function tab() {
var one = F.$('one');
var lists = [];
var child = one.childNodes;
for( var i=0 ; i<child.length ; i++ ) {
if( child[i].nodeName == 'LI' ) lists.push( child[i] );
}
for ( var j=0 ; j<lists.length ; j++ ) {
lists[j].onmouseover = function () {
var ul = F.tag (this , 'ul')[0];
F.addClass(ul,'block');
F.addClass(this,'block');
};
lists[j].onmouseout = function () {
var ul =F.tag (this , 'ul')[0];
F.removeClass(ul,'block');
F.removeClass(this,'block');
};
}
};
window.onload = tab;
</script>
</head>
<body>
<ul id="one" class="one two">
<li class="f-left"><a href="#">one</a>
<ul class="second">
<li>one1</li>
<li>one2</li>
<li>one3</li>
<li>one4</li>
</ul>
</li>
<li class="f-left"><a href="#">two</a>
<ul class="second">
<li>two1</li>
<li>two2</li>
<li>two3</li>
<li>two4</li>
</ul>
</li>
<li class="f-left"><a href="#">three</a>
<ul class="second">
<li>three1</li>
<li>three2</li>
<li>three3</li>
<li>three4</li>
</ul>
</li>
<li class="f-left"><a href="#">four</a>
<ul class="second">
<li>four1</li>
<li>four2</li>
<li>four3</li>
<li>four4</li>
</ul>
</li>
</ul>
</body>
</html> 展开
<script type="text/javascript">
//Begin
var F = {};//创建一个对象
F.$ = function( id ){
return document.getElementById( id);
};
F.tag = function( elem , tagName ){
return elem.getElementsByTagName( tagName );
};
F.hasClass = function(e, c) {
if (typeof e == "string") e = document.getElementById(e);
var classes = e.className;
if (!classes) return false;
if (classes == c) return true;
return e.className.search("\\b" + c + "\\b") != -1;
};
F.addClass = function(e, c) {
if (typeof e == "string") e = document.getElementById(e);
if (F.hasClass(e, c)) return;
if (e.className) c = " " + c;
e.className += c;
};
F.removeClass = function(e, c) {
if (typeof e == "string") e = document.getElementById(e);
e.className = e.className.replace(new RegExp("\\b"+ c+"\\b\\s*", "g"), "");
};
//End
function tab() {
var one = F.$('one');
var lists = [];
var child = one.childNodes;
for( var i=0 ; i<child.length ; i++ ) {
if( child[i].nodeName == 'LI' ) lists.push( child[i] );
}
for ( var j=0 ; j<lists.length ; j++ ) {
lists[j].onmouseover = function () {
var ul = F.tag (this , 'ul')[0];
F.addClass(ul,'block');
F.addClass(this,'block');
};
lists[j].onmouseout = function () {
var ul =F.tag (this , 'ul')[0];
F.removeClass(ul,'block');
F.removeClass(this,'block');
};
}
};
window.onload = tab;
</script>
</head>
<body>
<ul id="one" class="one two">
<li class="f-left"><a href="#">one</a>
<ul class="second">
<li>one1</li>
<li>one2</li>
<li>one3</li>
<li>one4</li>
</ul>
</li>
<li class="f-left"><a href="#">two</a>
<ul class="second">
<li>two1</li>
<li>two2</li>
<li>two3</li>
<li>two4</li>
</ul>
</li>
<li class="f-left"><a href="#">three</a>
<ul class="second">
<li>three1</li>
<li>three2</li>
<li>three3</li>
<li>three4</li>
</ul>
</li>
<li class="f-left"><a href="#">four</a>
<ul class="second">
<li>four1</li>
<li>four2</li>
<li>four3</li>
<li>four4</li>
</ul>
</li>
</ul>
</body>
</html> 展开
1个回答
展开全部
看看/学学javascript里的prototype库.
给你加了css代码，把下面存为html，打开可以看出动态菜单的效果了。
<script type="text/javascript">
//Begin
var F = {};//创建一个对象
F.$ = function( id ){
return document.getElementById( id);
};
F.tag = function( elem , tagName ){
return elem.getElementsByTagName( tagName );
};
F.hasClass = function(e, c) {
if (typeof e == "string") e = document.getElementById(e);
var classes = e.className;
if (!classes) return false;
if (classes == c) return true;
return e.className.search("\\b" + c + "\\b") != -1;
};
F.addClass = function(e, c) {
if (typeof e == "string") e = document.getElementById(e);
if (F.hasClass(e, c)) return;
if (e.className) c = " " + c;
e.className += c;
};
F.removeClass = function(e, c) {
if (typeof e == "string") e = document.getElementById(e);
e.className = e.className.replace(new RegExp("\\b"+ c+"\\b\\s*", "g"), "");
};
//End
function tab() {
var one = F.$('one');
var lists = [];
var child = one.childNodes;
for( var i=0 ; i<child.length ; i++ ) {
if( child[i].nodeName == 'LI' ) lists.push( child[i] );
}
for ( var j=0 ; j<lists.length ; j++ ) {
lists[j].onmouseover = function () {
var ul = F.tag (this , 'ul')[0];
F.addClass(ul,'block');
F.addClass(this,'block');
};
lists[j].onmouseout = function () {
var ul =F.tag (this , 'ul')[0];
F.removeClass(ul,'block');
F.removeClass(this,'block');
};
}
};
window.onload = tab;
</script>
<style>
li ul{
display:none;
}
.block{
display: block;
</style>
</head>
<body>
<ul id="one" class="one two">
<li class="f-left"><a href="#">one</a>
<ul class="second">
<li>one1</li>
<li>one2</li>
<li>one3</li>
<li>one4</li>
</ul>
</li>
<li class="f-left"><a href="#">two</a>
<ul class="second">
<li>two1</li>
<li>two2</li>
<li>two3</li>
<li>two4</li>
</ul>
</li>
<li class="f-left"><a href="#">three</a>
<ul class="second">
<li>three1</li>
<li>three2</li>
<li>three3</li>
<li>three4</li>
</ul>
</li>
<li class="f-left"><a href="#">four</a>
<ul class="second">
<li>four1</li>
<li>four2</li>
<li>four3</li>
<li>four4</li>
</ul>
</li>
</ul>
</body>
</html>
给你加了css代码，把下面存为html，打开可以看出动态菜单的效果了。
<script type="text/javascript">
//Begin
var F = {};//创建一个对象
F.$ = function( id ){
return document.getElementById( id);
};
F.tag = function( elem , tagName ){
return elem.getElementsByTagName( tagName );
};
F.hasClass = function(e, c) {
if (typeof e == "string") e = document.getElementById(e);
var classes = e.className;
if (!classes) return false;
if (classes == c) return true;
return e.className.search("\\b" + c + "\\b") != -1;
};
F.addClass = function(e, c) {
if (typeof e == "string") e = document.getElementById(e);
if (F.hasClass(e, c)) return;
if (e.className) c = " " + c;
e.className += c;
};
F.removeClass = function(e, c) {
if (typeof e == "string") e = document.getElementById(e);
e.className = e.className.replace(new RegExp("\\b"+ c+"\\b\\s*", "g"), "");
};
//End
function tab() {
var one = F.$('one');
var lists = [];
var child = one.childNodes;
for( var i=0 ; i<child.length ; i++ ) {
if( child[i].nodeName == 'LI' ) lists.push( child[i] );
}
for ( var j=0 ; j<lists.length ; j++ ) {
lists[j].onmouseover = function () {
var ul = F.tag (this , 'ul')[0];
F.addClass(ul,'block');
F.addClass(this,'block');
};
lists[j].onmouseout = function () {
var ul =F.tag (this , 'ul')[0];
F.removeClass(ul,'block');
F.removeClass(this,'block');
};
}
};
window.onload = tab;
</script>
<style>
li ul{
display:none;
}
.block{
display: block;
</style>
</head>
<body>
<ul id="one" class="one two">
<li class="f-left"><a href="#">one</a>
<ul class="second">
<li>one1</li>
<li>one2</li>
<li>one3</li>
<li>one4</li>
</ul>
</li>
<li class="f-left"><a href="#">two</a>
<ul class="second">
<li>two1</li>
<li>two2</li>
<li>two3</li>
<li>two4</li>
</ul>
</li>
<li class="f-left"><a href="#">three</a>
<ul class="second">
<li>three1</li>
<li>three2</li>
<li>three3</li>
<li>three4</li>
</ul>
</li>
<li class="f-left"><a href="#">four</a>
<ul class="second">
<li>four1</li>
<li>four2</li>
<li>four3</li>
<li>four4</li>
</ul>
</li>
</ul>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
