jQuery在Dreamweaver中正常工作，但不在任何瀏覽器中。怎麼修？

當談到使用jQuery時，我是一個絕對的新手。我編寫代碼並在Dreamweaver中進行測試。它完美的工作，直到我試圖在瀏覽器中運行它。 jQuery的目標是隱藏<div>，將文本追加到另一個<div>並顯示<div>。我將所有編碼放在一個名爲scripts.js的文件中。jQuery在Dreamweaver中正常工作，但不在任何瀏覽器中。怎麼修？

這個文件的內容是

$(document).ready(function() { //SignIn validation + content change 

    $("#enter_email").hide(); 
    $("#enter_password").hide(); 
    $("#main2").hide(); 

    $("#signIn").click(function(event){ 
     var email = $("#Email").val(); 
     var password = $("#password").val(); 
     if(email == "" && password == "") 
      $("#enter_email").show().add("#enter_password").show(); 
     else if(email != "" && password == "") 
      $("#enter_password").show(); 
     else if(email == "" && password != "") 
      $("#enter_email").show(); 
     else if(email == "admin" && password == "password") 
      $("#login").hide().add("#register").hide().add("#displayUserName").text(', ' + email).add("#main2").show().remove("#register"); 
     else 
     (overlay()); 
    }); 

    var now = new Date(); 
    var hours = now.getHours(); 
    var msg; 
    if(hours<12) 
     msg = "Good Morning"; 
    else if(hours<18) 
     msg = "Good Afternoon"; 
    else 
     msg = "Good Evening"; 
    $('#greeting').text(msg); 


    //Control the look of selected catalog categories 

    $(".shop-links1").click(function(){//Add category to selected 
     $(".clear").show(); 
     $("#selected").show(); 
     $("#catalogNav1").hide(); 
     $('div[class="shop-links1"]').add("#selected ul").append("<li><a class='selectedLinks' href=''>Category: " + $(this).text() + " </a></li>");  }); 

    $(".shop-links2").click(function(){//Add price to selected 
     $(".clear").show(); 
     $("#selected").show(); 
     $("#catalogNav2").hide(); 
     $('div[class="shop-links2"]').add("#selected ul").append("<li><a class='selectedLinks' href=''>Price: " + $(this).text() + " </a></li>"); 
     }); 

    $(".shop-links3").click(function(){//Add size to selected 
     $(".clear").show(); 
     $("#selected").show(); 
     $("#catalogNav3").hide(); 
     $('div[class="shop-links3"]').add("#selected ul").append("<li><a class='selectedLinks' href=''>Size: " + $(this).text() + " </a></li>"); 
     }); 

    $(".shop-links4").click(function(){//Add artist to selected 
     $(".clear").show(); 
     $("#selected").show(); 
     $("#catalogNav4").hide(); 
     $('div[class="shop-links4"]').add("#selected ul").append("<li><a class='selectedLinks' href=''>Artist: " + $(this).text() + "</a></li>"); 
     }); 

    $(".clear").click(function(){ 
     $(".clear").hide(); 
     $("#selected ul li:not(:first)").remove(); 
     $("#selected").hide(); 
     $("#catalogNav1").show(); 
     $("#catalogNav2").show(); 
     $("#catalogNav3").show(); 
     $("#catalogNav4").show(); 
    }); 

    //Sort catalog 

    $("#tops").click(function(){//Sort by tops 
      $(".tops").show(); 
      $(".tunics").hide(); 
      $(".dresses").hide(); 
     }); 

     $("#tunics").click(function(){//Sort by tunics 
      $(".tops").hide(); 
      $(".tunics").show(); 
      $(".dresses").hide(); 

     }); 

     $("#dresses").click(function(){//Sort by dresses 
      $(".tops").hide(); 
      $(".tunics").hide(); 
      $(".dresses").show(); 
     }); 

});//End document.ready

註釋下的面積「//控制選擇目錄類別的樣子」是我用來做什麼。

的HTML頭

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="js/jquery-1.9.1.min.js"></script> 
<script src="js/scripts.js"></script> 

<!-- Unique title on each page to increase search engine optimisation. Should always contain accurate information as well as some of the main focus areas. --> 
<title>Art on Fashion</title> 

<!-- Page description meta tag gives search engines a summary of what the page is about --> 
<meta name="description" content="This site has been created and submitted in partial fulfilment of the BSc Hons Information and Communication Technologies course, it is a final year project that focuses on XHTML, PHP, JavaScript, SEO, MySQL, CSS and a Content Management System"/> 

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" /> 

</head>

來源

2013-02-21 Chris Brennan

你能從你的HTML文件中添加''標籤的內容嗎？ – Fresheyeball 2013-02-21 17:04:03

您是否嘗試過使用瀏覽器的控制檯進行調試，以查看正在生成的錯誤消息？你記得包括jQuery和檢查你的路徑？ – j08691 2013-02-21 17:06:52

http://scmweb.infj.ulst.ac.uk/~B00448232/com601/assignment_1/login.html – 2013-02-21 17:09:48

~~我不相信它是有效的HTML離開href空。~~如果你使用jQuery攔截錨標記，<a>的默認click行爲，使用href="#"。

不要忘了把jQuery's preventDefault()在每個click處理函數的頂部，這將：

防止頁面跳轉到頂部，
防止哈希被添加到URL ，
以及防止哈希URL被添加到瀏覽歷史記錄。

的jQuery：

$(".shop-links2").click(function(event){ 
    event.preventdefault(); 
    // your click handler code 
});

HTML：

<a href="#" class="shop-links2 .....

來源

2013-02-21 17:49:44 Sparky

非常感謝你 – 2013-02-21 20:55:59

這是有效的html引導'href'屬性，但這使得標記一個命名的錨點，而不是一個超鏈接。（請參閱[w3.org]（http://www.w3.org/TR/html4/struct/links.html#h-12.2））瀏覽器對每個和具名的錨都有不同的行爲，通常不會獲得點擊事件偵聽器。 Dreamweaver不能區分。 – 2013-02-27 20:25:15

@PatrickM，你是對的，它仍然是有效的HTML，我相應地更新了我的文章。但是，忽略'href'完全會導致[光標和文本將如何顯示]的問題（http://jsfiddle.net/vArxR/2/）。當「」空着......當你在「link」之間插入一些文本時，它就變成了「超鏈接」（只要它還有一個「href」），它就只是一個「錨點」。至於錨點標籤沒有獲得'click'事件監聽器;你可以附加一個'click'事件監聽器給你想要的任何東西......甚至一個'div'。 – Sparky 2013-02-27 20:59:07

jQuery在Dreamweaver中正常工作，但不在任何瀏覽器中。怎麼修？

回答

相關問題