当前位置：首页 → 问答吧 → 关于js调用问题，菜鸟求教

关于js调用问题，菜鸟求教

时间：2010-05-21

来源：互联网

我修改了一个js类似QQ菜单导航栏，现在想把这个导航栏放到要做的网站的HTML中。
可是发现用了声明以后，导航栏的效果就没有了，想问下该如何解决这个问题呢？

作者: CrossJae 发布时间: 2010-05-21

上代码！

作者: fonqing 发布时间: 2010-05-21

html文件：

<HTML><HEAD><TITLE>side_bar</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<link href="all.css" type=text/css rel=stylesheet>
<META content="MSHTML 6.00.2900.2523" name=GENERATOR></HEAD>
<BODY>
<script src="aaa.js" type=text/javascript></script>
</BODY>
</HTML>

JS文件：

var layerTop=100;
var layerLeft=80;
var layerWidth=200;
var titleHeight=30;
var contentHeight=200;
var stepNo=5;

var itemNo=0;runtimes=0;
document.write('');

function addItem(itemTitle,itemContent){
itemHTML='<div id=item'+itemNo+' itemIndex='+itemNo+' style="position:relative;left:0;top:'+(-contentHeight*itemNo)+';width:'+layerWidth+';"><table width=100% cellspacing="0" cellpadding="0">'+
 '<tr><td height='+titleHeight+' onclick=changeItem('+itemNo+') class="titleStyle" align=left>'+itemTitle+'</td></tr>'+
 '<tr><td height='+contentHeight+' class="contentStyle">'+itemContent+'</td></tr></table></div>';
document.write(itemHTML);
itemNo++;
}

addItem('Bread Making Equipment','<a href="#">M Series Food Mixer</a> <a href="#">Bread Slicer</a> <a href="#">Spiral Mixer</a> <a href="#">More...</a>');
addItem('Meat Processing Equipment','<a href="#">Filling Mixer</a> <a href="#">Rapid Sausage Filler</a> <a href="#">Meat Slicer</a> <a href="#">More...</a>');
addItem('Vegetable&Fruit Equipment','<a href="#" target="_blank">Potato Peeler</a> <a href="#" target="_blank">Melon And Fruit Cutter</a> <a href="#">Vegetable Cutter</a> <a href="#">More...</a>');
addItem('Baking Equipment','<a href="#">Luxury Pizza Oven</a> <a href="#">Electric Oven Series</a> <a href="#">Gas Oven</a> <a href="#">More...</a>');
addItem('Soybean Processing Equipment','<a href="#">Cylinder Water Boiler</a> <a href="#">Electric Water Heater</a> <a href="#">More...</a>');
addItem('Other Food Equipment','<a href="#">Sugarcane Presser</a></center>');

document.write('')
document.all.itemsLayer.style.height=itemNo*titleHeight+contentHeight;

toItemIndex=itemNo-1;onItemIndex=itemNo-1;

function changeItem(clickItemIndex){
toItemIndex=clickItemIndex;
if(toItemIndex-onItemIndex>0) moveUp(); else moveDown();
runtimes++;
if(runtimes>=stepNo){
 onItemIndex=toItemIndex;
 runtimes=0;}
else
 setTimeout("changeItem(toItemIndex)",10);
}

function moveUp(){
for(i=onItemIndex+1;i<=toItemIndex;i++)
 eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)-contentHeight/stepNo;');
}

function moveDown(){
for(i=onItemIndex;i>toItemIndex;i--)
 eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)+contentHeight/stepNo;');
}
changeItem(0);

CSS文件：.titleStyle {
 BORDER-TOP: #ffffff 1px solid;
FONT-SIZE: 9pt;
CURSOR: default;
COLOR: #ffffff;
BACKGROUND-COLOR: #00699d;
font-weight:bold;
padding-left:10px;
overflow:hidden;
}

.contentStyle {
 FONT-SIZE: 9pt;
COLOR: #00699d;
BACKGROUND-COLOR: #d2effd;
padding-left:20px;
padding-top:20px;
}

A {
TEXT-DECORATION: none;
 COLOR: #00699d;
}
a:hover{
font-weight:bold;
}

BODY {
 FONT-SIZE: 12px;
}

在HTML前加上声明以后就没有效果了。

[ 本帖最后由 CrossJae 于 2010-5-21 15:26 编辑 ]

作者: CrossJae 发布时间: 2010-05-21

这个功能只要几行代码就可以了

作者: Einsy 发布时间: 2010-05-21

引用:

原帖由 Einsy 于 2010-5-21 15:29 发表
这个功能只要几行代码就可以了

啊！能把代码写下嘛？谢谢！！！

作者: CrossJae 发布时间: 2010-05-21

- -|要把js里写的东东封装成一个方法，引用js文件后调用这个方法才行吧

作者: kof7650 发布时间: 2010-05-21

引用:

原帖由 kof7650 于 2010-5-21 17:49 发表
- -|要把js里写的东东封装成一个方法，引用js文件后调用这个方法才行吧

哦哦我回去再查一下~谢谢了

作者: CrossJae 发布时间: 2010-05-22

我用你的代码来试，一个字都没改，完全可以嘛！

你是不是文件名没整对哦！

作者: yypz 发布时间: 2010-05-22

引用:

原帖由 yypz 于 2010-5-22 10:57 发表
我用你的代码来试，一个字都没改，完全可以嘛！

你是不是文件名没整对哦！144637

呃，那是因为我前面没加声明
如果加上声明就不好用了。
例如你在HTML文件开头加上这段：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

作者: CrossJae 发布时间: 2010-05-22

关于js调用问题，菜鸟求教

引用:

引用:

引用:

热门阅读

热门下载