4

初投稿はこちら。皆さんが助けてくれることを願っています。それは非常にありがたいことであり、私は何かを学ぶと確信しています. また、以下の私の問題に加えて他の冗長性が見られる場合は、コーディング プラクティスに関する新しい問題を遠慮なくリッピングしてください。できるだけ多くのことを学ぶ必要があります。問題に！

2 つの別々のスクリプトを途中まで持っていますが、それらを完全に機能させることはできません。

最初は「magicline」スクリプトです。これにより、ナビゲートするページに基づいて、ナビゲーションの下の線がアニメーション化されます。

私が理解できないこと: 1) ナビゲーション項目の間隔を空けるために margin-left:"" を追加することによって生じる余分な線幅をなくす方法。

次に、jquery を使用してページ コンテンツを読み込みます。サポート ページ セクションからコンテンツを呼び出すだけで、4 つの個別のページを読み込めるようにしたいと考えています。今のところ、2つの問題があります。1 つは、クリックしたページに関係なく、同じコンテンツを何度もリロードすることです。また、URL が適切なページに更新されても、ナビゲーションの「現在のページ」のカラー マーカーは追従しません。

これをより理解しやすくするために、ここでライブデモを実行しています: http://www.youngsaye.net/v2/

どんな助けでも大歓迎です。

ありがとう！

4

2 に答える 2

1

最初の問題については、マージンを含めないように、magicline で少し追加の計算を行う必要があります。

// get the left margin of current page item
var marg = parseInt($(".current_page_item a").css("marginLeft"));
$magicLine
    .width($(".current_page_item").width() - marg)
    .css("left", $(".current_page_item a").position().left + marg)

幅から余白を差し引いて、余白を左オフセットに追加するだけなので、まだ整列しています。これを再利用可能にする (つまり、関数に入れて a 要素をクリックしたときに呼び出す) か、クリック イベントのコードを変更して同じことを行う必要があります。(最初のコードをお勧めします。2 つの場所で同じコードを使用する理由はありません)

従いたいロジックは次のようなものです:

  • ページの読み込み: マジック ライン アイテムを追加します。
  • マジラインを並べる.current_page_item
  • バインド#topnav li aクリック
    1. クリックしたa要素にマジックラインをアニメーション化します。
    2. のインスタンスをすべて削除します.current_page_item。
    3. current_page_itemクリックしたa要素にクラスを追加します。
于 2012-08-29T20:15:58.647 に答える
1

ページを見てみると、私が見ているものは次のとおりです。

1) マジック ライン スクリプトは、クラス「current_page_item」を持つ要素に基づいて下線の幅を決定します。

これはすべてjavascriptなので。メニュー アンカー/リンクを設定して、current_page_item クラスを選択した項目に更新し、前の項目から削除する JavaScript を含める必要があります。CSSスタイルのように見えるので、強調表示の問題も更新する必要があります。

このための基本的なスクリプトは次のようになります。

function updateCurrent(e) {
  $('.current_page_item').removeClass('current_page_item');
  $(e).parent('li').addClass('current_page_item');
}

すべてのアンカーには、次のような onClick があります。

<a href="print.html" onclick="updateCurrent(this);">Print</a>

2) 2 番目の質問の要点を完全には理解していません。ナビゲーションは適切なコンテンツを指しているように見えます。

以下の追加コメントの編集：

$('#topnav li a').click(function(){
    // Update the current item.
    $('.current_page_item').removeClass('current_page_item');
    $(this).parent('li').addClass('current_page_item');

    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
        $('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#content').show('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    return false;

});

編集パート 2: マジック ラインで幅を無視するという問題がまだ発生していることがわかります。必要なのは、アンカーがクリックされている間です。初期ロードで適用したのと同じ計算も実行する必要があります。

更新されたマジック ライン js は次のようになります。

// DOM Ready
$(function() {

$("#topnav").append("<li id='magic-line'></li>");

// get the left margin of current page item
var marg = parseInt($(".current_page_item a").css("marginLeft"));


/* Cache it */
var $magicLine = $("#magic-line");

$magicLine
    .width($(".current_page_item a").width())
    .css("left", $(".current_page_item a").position().left + marg)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("#topnav li").find("a").click(
    $el = $(this);
    // Do the math for each click
    leftPos = $el.position().left + marg;  
    newWidth = $el.parent().width() - marg;

    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});

/* Kick IE into gear */
$(".current_page_item_two a").mouseenter();

});

于 2012-08-29T20:16:54.980 に答える