0

スキル別に整理された履歴書の Web ページを作成しました。

ページの上部には、ナビゲーションに 3 つのボタンがあります。

<p>Choose the type of experience you are interested in seeing:</p>
<button class="button-w" type="button">Writing/Editing Experience</button>
<button class="button-t" type="button">Teaching/Training Experience</button>
<button class="button-c" type="button">Current Experience</button>

HTML ドキュメントの対応する各セクションに独自のクラスを指定しました。例: すべての執筆/編集経験を含める。

次に、書き込み/編集以外のすべてのセクションを削除/切り離すために jquery を作成しました。下記参照。最初にクリックしたボタンで機能します。しかし、問題は、「教育/トレーニング経験」ボタンをクリックすると、「執筆/編集経験」ボタンをクリックしたときにそのコンテンツを既に削除しているため、何も得られないことです。

ここに私が持っているものがあります:

$(document).ready(function(){

$(".button-w").click(function(){
    $("section, div").detach(".teaching, .current");

});

$(".button-t").click(function(){
   $("section, div").detach(".writing, .current");
});

$(".button-c").click(function(){
    $("section, div").detach(".writing, .teaching");
});
});

私が必要としているのは次のいずれかだと思います: -- "show"/"hide" を使用し、ある種の条件文を追加して、一方が表示されている場合、ボタンの選択ごとに他のものが非表示になるようにするか、または --jquery を注文して、新しいボタンをクリックすると、最初に元のコンテンツが復元され、次に選択したセクション以外がすべて削除されます。

手伝ってくれますか？

4

2 に答える 2

0

ここで自分の質問に答えています。自分のニーズを解決したいのはフィルターを作成することだと本当に気づいたからです。そこで、除外したい各 HTML 要素にラベルを付けてハンドルを作成しました。

<section class="filter writing">
<section class="filter teaching">
<section class="filter current">

ナビゲーションメニューを作成しました：

<nav>
<div class="container">
<h5>What experience would  you like to see?</h5>
    <ul>
        <li class="button active" data-filter="all">All</li>
        <li class="button" data-filter="writing">Writing/Editing Experience</li>
        <li class="button" data-filter="teaching">Teaching/Training Experience</li>
        <li class="button" data-filter="current">Current Experience</li>
        <div style="clear: both;"></div>
    </ul>
</div>
</nav>

次に、以下の jquery (このビデオから学んだこと: https://www.youtube.com/watch?v=pPyT6zyPz7g ) を HTML ハンドルに適用し、メニュー ボタンを使用します。

$(document).ready(function(){
$(".button").click(function(){
    var value = $(this).attr("data-filter");
    if (value == "all")
    {
        $(".filter").show("1000");
    }
    else
    {
        $(".filter").not("."+value).hide("1000");
        $(".filter").filter("."+value).show("1000");
    }
    //add active class
    $("ul .button").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
    })
})
})

メニューにホバリングを追加するなどの CSS をここで除外すると、これで目的が達成されました。

于 2018-07-30T18:05:08.153 に答える