2

当谈到使用 jQuery 时，我绝对是个新手。我正在编写代码并在 Dreamweaver 中对其进行测试。在我尝试在浏览器中运行它之前，它可以完美运行。jQuery 的目标是隐藏一个<div>，将文本附加到另一个<div>并显示<div>。我将所有的编码都放在一个名为 scripts.js 的文件中。

这个文件的内容是

$(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>
4

1 回答 1

2

我不相信href留空是有效的 HTML。 如果您使用 jQuery 拦截click锚标记的默认行为，请<a>使用href="#".

不要忘记将jQuerypreventDefault()click放在每个处理函数的顶部，这将：

  • 防止页面跳到顶部，
  • 防止将哈希添加到 URL，
  • 以及防止将哈希 URL 添加到浏览历史记录中。

jQuery：

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

HTML：

<a href="#" class="shop-links2 .....
于 2013-02-21T17:49:44.050 回答