2013-08-19 48 views
0

如果修復了我昨天遇到的所有問題,但是當我將文件拖到任何瀏覽器中時,它只會顯示「Hello」,並且根本不包含元素,也不會在點擊時隱藏。CSS/Javascript錯誤

MyIndex.html

<!DOCTYPE HTML> 
<HTML> 
    <head></head> 
    <body> 
    <title>Mary Bishop</title> 
    <link href="stylesheet.css" type="text/css" rel="stylesheet"> 
    <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script> 
    <script type="text/javascript" src="jscript.js"></script> 
      <div ID="contact">Hello</div> 
     </body> 
</HTML> 

stylesheet.css中

#contact { 
    height: 100px; 
    width: 100px; 
    background-color: #517F8F; 
    border-radius: 25px; 
    border: 2px solid blue; 
    text-align: center; 
    display: block; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 100px; 
} 

jscript.js

$(document).ready(function(){ 
    $('#contact').click(function(){ 
     $(this).hide(); 
    }); 
}); 

我移動身體標記多達包括所有的鏈接(你可以請參閱當前的HTML文件),但這並沒有改變什麼:(我很困惑,任何幫助將不勝感激

+3

從修復您的HTML開始。把你的標題,鏈接和腳本放在首位。 – j08691

+0

即使是這樣,它在這裏也能正常工作(在Win7中有FF16,Chrome28和IE10)。你使用的是什麼瀏覽器?控制檯中是否有任何錯誤?你有JavaScript禁用? – ssarabando

+0

然後停止將文件拖入瀏覽器,並設置適當的Web服務器(查看XAMPP)。 – bfavaretto

回答

0

你可能有其他的文件夾內的文件。例如,不包含您的文件的文件夾是這個樣子?:

MyWebsite 
    scripts <-- this is a folder 
     jscript.js <-- this file is in the "scripts" folder 
    stylesheets 
     stylesheet.css 
    MyIndex.html 

如果是這樣,那麼你就需要更新您的<link><script>代碼,使它們看起來就像這樣:

<link href="stylesheets/stylesheet.css" type="text/css" rel="stylesheet"> 
      ^^^^^^^^^^^^ <- this should be the name of the folder 
           that your stylesheet lives in 
<script type="text/javascript" src="scripts/jscript.js"></script> 
            ^^^^^^^^ 

基本上,你需要添加適當的文件夾到你的鏈接:否則它們指向錯誤的地方。

您可以在Chrome中點擊[control][u]以快速加載您的網頁的源代碼。然後,您會看到JavaScript和樣式表網址作爲鏈接。您可以點擊這些來關注他們是否正常工作。

You can click on these links

+0

我使用的是崇高的文本2,所以包含我的文件的文件夾是通過c/users/mary/mydocuments /等等。我如何讓他們變得更小作爲我的網站的一部分? – Mary

+0

很難確定沒有看到你的文件夾是什麼樣子,但這個答案可以給你更多關於寫鏈接的細節:http://stackoverflow.com/questions/15078748/how-to-make-working-path-in -html/15079041#15079041總之,你需要了解三個文件中的每一個是相對於彼此。他們在同一個文件夾中嗎?或者他們在不同的文件夾?你能直接在瀏覽器中打開任何JavaScript或CSS文件嗎?喜歡這個:? http://cdn.sstatic.net/stackoverflow/all.css?v=e97b23688ee8 – Chris

+0

這真是太棒了,克里斯,非常感謝你。這些鏈接不起作用,所以我要弄清楚如何將我的文件保存在除我的計算機以外的其他位置,並使鏈接與我存儲文件的位置相匹配。希望能解決這個問題,我可以完成這個項目。感謝您的時間和關注。你的幫助對我來說是無價的。 – Mary

0

<主體>元素應該只包含<div>元素。否則,您發佈的代碼似乎正在工作。檢查以確保這個fiddle是你想要的。

HTML:

<div ID="contact">Hello</div> 

CSS:

#contact { 
    height: 100px; 
    width: 100px; 
    background-color: #517F8F; 
    border-radius: 25px; 
    border: 2px solid blue; 
    text-align: center; 
    display: block; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 100px; 
} 

的JavaScript:

$(document).ready(function(){ 
    $('#contact').click(function(){ 
     $(this).hide(); 
    }); 
});