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 に答える