1

jQuery は今週私を破壊しています。ポートフォリオ サイト ( http://www.codeisdna.com )で jQuery 経由で fadeIn を使用して、クリックするとセクションが開きます。私が使用しているHTMLコードは次のとおりです。

<div class="project first project_name">
    <div class="title">
        Project Title!
        <div class="date">2012</div>
    </div>
    <a class="expand" title="Click to expand the project." href="#project_1">Project Title!</a>
</div>

タブが開きます：

<div id="project_1" class="project_full pname"></div>

このjsを使用：

    $(document).ready(function(){
        $(".project").click(function() {
            $("a.expand").removeClass("hovered");
            $(this).find("a.expand").addClass("hovered");
            $(".project_full").hide();
            var selected_tab = $(this).find("a").attr("href");
            $(selected_tab).fadeIn();
            return false;
        });
    });

編集: .project_full の CSS コードは次のとおりです (展開されたタブ - .project の CSS コードは無関係です)。

.project_full {
    display: none;
    margin-top: 20px;
    width: 100%;
    max-height: 450px;
    padding: 20px 0px;
    text-align: center;
    background: url(../img/code.jpg) top center no-repeat fixed #293134;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    color: #fff;
    overflow: hidden;}
.project_full .wrapper {position: relative;}

親 div に固定の高さを割り当てようとしましたが、e.PreventDefault() が機能しません (アンカー ベースのタブを使用しているため、そのようなものは何も機能しません)。ページは最初のクリックでジャンプし、連続してクリックするたびにジャンプします。divが非表示にされて「再非表示」になると、コンテンツが欠落しているためにジャンプすることを私は知っています。

HTML5 のデータ属性がこれを解決するかどうか疑問に思っていますか? しかし、繰り返しになりますが、空白 (#) であるにもかかわらず、アンカーがまだ存在するのはなぜでしょうか。

JSの経験が豊富な人が私を助けてくれることを願っています!

4

1 に答える 1

1

ハンドラーを変更してpreventDefaultを追加するか

    $(".project").click(function(e) {
        e.preventDefault();
        $("a.expand").removeClass("hovered");
        $(this).find("a.expand").addClass("hovered");
        $(".project_full").hide();
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        return false;
    });

または、aタグhref属性を「javascript:」のようなものに変更します。

または、タグをスパンに置き換えて、クリック ハンドラーを変更しないようにします。

<a name='project_1'></a>または、対応する名前のアンカーがないため、このタグまたはページの先頭までスクロールしているため、適切な場所にタグ ( ) に name 属性を追加します。

于 2013-03-16T19:48:22.550 に答える