PAT-python-zjw 2017-06-11 03:07 采纳率: 0%
浏览 1263
已结题

DOM对象操作为什么只能对一个页面有效果,其他页面不行?

我建了两个页面,分别命名为index.html(主页)和about.html.然后将javascript代码命名为
global.js,里面同时包含操控这两个页面的函数。将global.js同时插入到两个页面的body标签最后。
结果是作用于index.html页面的函数一切工作正常,但作用于about.html页面的函数却不起作用。求解释。
index.html

 <!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>TEST</title>
  <script src="scripts/modernizr.js"></script>
  <link rel="stylesheet" media="screen" href="styles/index.css" />
 </head>
 <body>
  <header>
   <div id="logos">
    <img id="logo" src="images/logo.jpg" alt="SIEA" />
    <a href="http://www.zju.edu.cn/" class="linklogo"><img src="images/school.gif" alt="浙江大学" /></a>
    <a href="http://oc.zju.edu.cn/" class="linklogo"><img src="images/collage.gif" alt="海洋学院" /></a>
   </div>
   <nav>
    <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="photos.html">Photos</a></li>
     <li><a href="live.html">Live</a></li>
     <li><a href="contact.html">Contact</a></li>
     <li><a href="arrangement.html">Arrangement</a></li>
    </ul>
   </nav>
  </header>
  <article>
   <h1>Welcome</h1>
   <p>
    <span>T</span>oday,we are going to introduce some kinds of fruits. The first type of fruit
    is the <a href="#" title="apple">Apple</a>.The second type of fruit is the <a href="#" title="banana">
    Banana</a>.The last type of fruit is the <a href="#" title="cherry">Cherry</a>.We all love eating
    fruits. Let us have a look!!!
   </p>
   <div id="slideshow">
    <img src="images/fruits.jpg" alt="fruits" id="preview" />
   </div>
  </article>
  <footer>
   <p>Designed by <abbr title="Zhejiang University">ZJU</abbr> Mareine Geology Lab</p>
  </footer>
  <script src="scripts/global.js"></script>
 </body>
</html>

about.html

 <!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>TEST</title>
  <script src="scripts/modernizr.js"></script>
  <link rel="stylesheet" media="screen" href="styles/about.css" />
 </head>
 <body>
  <header>
   <div id="logos">
    <img id="logo" src="images/logo.jpg" alt="SIEA" />
    <a href="http://www.zju.edu.cn/" class="linklogo"><img src="images/school.gif" alt="浙江大学" /></a>
    <a href="http://oc.zju.edu.cn/" class="linklogo"><img src="images/collage.gif" alt="海洋学院" /></a>
   </div>
   <nav>
    <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="photos.html">Photos</a></li>
     <li><a href="live.html">Live</a></li>
     <li><a href="contact.html">Contact</a></li>
     <li><a href="arrangement.html">Arrangement</a></li>
    </ul>
   </nav>
  </header>
  <article>
   <h1>About the band</h1>
    <nav>
     <ul>
      <li><a href="#jay">Jay Skript</a></li>
      <li><a href="#domsters">The Domsters</a></li>
     </ul>
    </nav>
    <section id="jay">
     <h2>Jay Skript</h2>
      <p>Jay Skript is going to rock your world!</p>
      <p>Together with his compatriots the Domsters,
      Jay is set for world domination. Just you wait and see.
      </p>
      <p>Jay Skript has been on the scene since the mid 1990s.
      His talent has not always been recognized or fully appreciated.
      In the early days, he was ofen unfavorably compared to bigger, 
      similarly named artists. That is all in the past now.</p>
    </section>
    <section id="domsters">
     <h2>The Domsters</h2>
      <p>The Domsters have been around, in one form or another, 
      for almost as long. it is only in the past few years that the
       Domsters have settled down to their current, stable lineup. 
       Now they're a rock-solid bunch: methodical and dependable.</p>
    </section>
  </article>
  <footer>
   <p>Designed by <abbr title="Zhejiang University">ZJU</abbr> Mareine Geology Lab</p>
  </footer>
  <script src="scripts/global.js"></script>
 </body>
</html>

global.js

 function addLoadEvent(func)   //将函数添加到window.onload事件中
{
    var oldonload=window.onload;
    if (typeof window.onload!='function')
    {
        window.onload=func;
    }else
    {
        window.onload= function(){
            oldonload();
            func();
        }
    }
}

function insertAfter(newElement,targetElement)    //在元素后面插入元素
{
    var parent=targetElement.parentNode;
    if (parent.lastChild==targetElement)
    {
        parent.appendChild(newElement);
    }else
    {
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

function addclass(element,value)    //为元素加类
{
    if (!element.className)
    {
        element.className=value;
    }else
    {
        newClassName=element.className;
        newClassName+=' ';
        newClassName+=value;
        element.className=newClassName;
    }
}

function highlightPage()   //作用于所有页面,使当前页面的导航按钮高亮
{
    if (!document.getElementsByTagName) return false;
    var headers=document.getElementsByTagName('header');
    if (headers.length==0) return false;
    var navs=headers[0].getElementsByTagName('nav');
    if (navs.length==0) return false;
    var links=navs[0].getElementsByTagName('a');
    if (links.length==0) return false;
    for (var i=0;i<links.length;i++)
    {
        linkurl=links[i].getAttribute("href");
        if (window.location.href.indexOf(linkurl)!=-1)
        {
            links[i].className="here";
        }
    }
}
function moveElement(elementID,final_x,final_y,interval) //作用于index页面,使元素移动
{
    if (!document.getElementById) return false;
    var elem=document.getElementById(elementID);
    if (!elem) return false;
    if (elem.movement) clearTimeout(elem.movement)
    var xpos=parseInt(elem.style.left);
    var ypos=parseInt(elem.style.top);
    if (xpos==final_x && ypos==final_y) return true;
    if (xpos<final_x) xpos++;
    if (xpos>final_x) xpos--;
    if (ypos<final_y) ypos++;
    if (ypos>final_y) ypos--;
    elem.style.top=ypos+'px';
    elem.style.left=xpos+'px';
    var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    elem.movement=setTimeout(repeat,interval);
}
function prepareSlideshow()   //作用于index页面,使元素的移动与鼠标事件挂钩(冲突函数)
{
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;
    var preview=document.getElementById('preview');
    preview.style.position="absolute";
    preview.style.top="0px";
    preview.style.left="0px";
    var articles=document.getElementsByTagName('article');
    if (articles.length==0) return false;
    var ps=articles[0].getElementsByTagName('p');
    if (ps.length==0) return false;
    var links=ps[0].getElementsByTagName('a');
    if (links.length==0) return false;
    links[0].onmouseover=function(){
        moveElement("preview",0,0,10);
    }
    links[1].onmouseover=function(){
        moveElement("preview",-325,0,10);
    }
    links[2].onmouseover=function(){
        moveElement("preview",-640,0,10);
    }
}

function showSection(id)                      //作用于about页面,使当前章节显示
{
    if (!document.getElementById) return false;
    if (!document.getElementsByTagName) return false;
    var articles=document.getElementsByTagName('article');
    if (articles.length==0) return false;
    var sections=articles[0].getElementsByTagName('section');
    if (sections.length==0) return false;
    for (var i=0;i<sections.length;i++)
    {
        if (sections[i].getAttribute('id')==id)
            sections[i].style.display='block';
        else
            sections[i].style.display='none';
    }
}

function prepareInternalnav()                 //作用于about页面,使显示函数与鼠标点击事件挂钩(冲突函数)
{
    if (!document.getElementsByTagName) return false;
    var articles=document.getElementsByTagName('article');
    if (articles.length==0) return false;
    var navs=articles[0].getElementsByTagName('nav');
    if (navs.length==0) return false;
    var links=navs[0].getElementsByTagName('a');
    if (links.length!=2) return false;
    links[0].destination=links[0].getAttribute('href').split('#')[1];
    links[1].destination=links[1].getAttribute('href').split('#')[1];
    document.getElementById(links[0].destination).style.display='none';
    document.getElementById(links[1].destination).style.display='none';
    links[0].onclick=function(){
        showSection(links[0].destination);
        return false;
    }
    links[1].onclick=function(){
        showSection(links[1].destination);
        return false;
    }
}

addLoadEvent(highlightPage);
//addLoadEvent(prepareSlideshow); //将一个index页面的函数屏蔽,则about页面函数运行正常
addLoadEvent(prepareInternalnav);

  • 写回答

4条回答 默认 最新

  • kun_hello 2017-06-11 03:52
    关注

    看下是报了什么错 或者那里的语法写错了 这些没有代码很难猜出来

    评论

报告相同问题?

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!