1

ここでかなり大きな質問です。基本的には、index.html を読み込むときに中央の見出しを持つサイトを作成していますが、jquery を使用してヘッダーを変更し、ユーザーがリンクをクリックしたときにトランジションでヘッダーをページの上部に移動したいと考えています。ヘッダーが立ち上がるとコンテンツがフェードします。したがって、変更してパネルを変更するdisplay: hidden; 誰かが解決策を提供できれば、それは大歓迎です[私はjsにかなり慣れていないため、以前にjqueryを行ったことがありませんが、jqueryが使用するのに最適なライブラリのようです]

    <!DOCTYPE html>
<html>
<head>
    <title>Chris Calcroft &#149; Arbitrator</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/stuff.js"></script>
</head>
<body>
    <div class='header'>
        <img src='img/header.jpg' alt='header'>
        <ul class='headerNav'>
            <li id='about' onclick='pageChange(id);'>about</li>
            <li id='projects' onclick='pageChange(id);'>projects</li>
            <li id='contact' onclick='pageChange(id);'>contact</li>
        </ul>
    <div>
</body>
</html>

JS:

$(function pageChanger(id) {  
    $("id").click(function() {  
        $(".header").toggleClass(".header-transition");  
    });  
});

CSS:

@font-face {
    font-family: avant;
    src: url('font/avant.ttf');
}

html {
    background-color: black;
    color: white;
    font-family: avant;
}

.header {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -175px;
    margin-left: -450px;
    -webkit-transition: top 2s ease, 
                left 2s ease, 
                margin-left 2s ease, 
                margin-top 2s ease,
                position 2s ease;
}

.header-transition {
    top: 0;
    left: 0;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    position: static;
    display: block;
}

li {
    text-decoration: none;
    display: inline;
    padding: .2% 1.3%;
}

li:hover {
    color: gray;
}

これは私がこれまでに持っているものです。クラスを切り替えるために正しいIDをjqueryに渡そうとすると、壁にぶつかりました。

みんなありがとう ：）

4

3 に答える 3

0

一見すると、いくつかの点が間違っています。

  • クリック イベントを 2 回バインドしています。インライン HTML onclick ハンドラーと、スクリプトの jQuery click() メソッドの両方を使用しています。

  • onclick イベントでバインドしている関数は、スクリプトで定義している関数とは異なる名前を持っているため、イベントが発生しても何も呼び出されません。

  • $(function pageChanger(id)... など、クロージャー内で名前付き関数を定義しています...これは私には正しく見えませんが、これについては間違っている可能性があります。

  • クリック イベントごとに ID を関数に渡す方法が間違っています。onclick ステートメントでは、「id」を関数に渡しています。これは、要素の ID 属性の値であると想定していますが、これは機能しません。一方、スクリプトでは、関数のパラメーターを「id」として定義しますが、関数内で引用符で囲まれた文字列、つまり「id」として参照します。このため、この形式の jQuery セレクター オブジェクト $("id").click は、無効な 'id' 要素を選択するよう jQuery に指示しています (HTML には 'id' 要素はありません)。

ここでは少しトピックから外れているかもしれませんが、上記が JS / jQuery の一般的な知識を向上させるのに役立つことを願っています.

できることは、スクリプトで click() メソッドを使い続けることですが、関数で使用するのではなく、単純にリスト要素に直接バインドすることができます。注: アンカー要素をリスト要素内に配置し、クリック イベントをそれらにアタッチする方がよい場合があります。これは意味的に優れたマークアップであり、レガシー ブラウザーでの失敗したイベントの発生を回避する必要があるためです (IE7 はクリック イベントをリッスンしないと思います。アンカー要素にバインドされていません)。

次のことを試してください。

Change links to -
<li><a href="#">Link text</a></li>

Change JS to this -
$(function(){
  $(".headerNav a").click(function(e){
     var elem = $(e.target), // e.target points to the element that triggered the event
         elemId = elem.attr("id");

     // it isn't clear what each unique element's click event will do, but here is where you defien that logic      
  })
})

Using e.target in a jQuery object is a much cleaner and more efficient way to dynamically bind an event to multiple elements.

これが役立つことを願っています。

于 2013-10-25T21:30:42.733 に答える
0

次のコードは、リスト項目がクリックされるたびにヘッダー css を切り替えます。

$(document).ready(function(){
    var currentCssClass = $(".header").attr("class");
    $(".header > ul > li").click(function(){
        $(".header").toggleClass("header-transition");
    });
});

デモ

于 2013-10-25T21:32:15.063 に答える
0

$("id") は、タグ名がidであるすべての要素を意味します

以下のように関数で id を使用する必要がありますが、これはあなたが望むものではないと思います。

$(function pageChanger(id) {  
    $("#"+id).click(function() {  
        $(".header").toggleClass(".header-transition");  
    });  
});

私があなたのケースを理解したら、次のことを行う必要があります。

$('.headerNav li').click(function(){
$(".header").toggleClass(".header-transition");  
});

セレクターの詳細については、jquery セレクターを参照してください

編集：

それぞれの li が異なることをする場合は、それらに ID を与えて次のようにする必要があります。

$('#about').click( function(){
......
});
$('#project').click( function(){
......
});
$('#contact').click( function(){
......
});

他のすべての人に対してこれを行います。また：

 $('.headerNav li').click(function(){
    switch($(this).attr('id')){
        case 'about':
               //do something
        case 'project':
               //do something else
        case 'contact':
               //do another thing
        }
    });
于 2013-10-25T20:35:24.470 に答える