どのように「絞り込み」フィルタリングメニューを作成しますか？

Question

mcmaster.comのウェブサイトのようなサイドバーメニューを作りたいと思います。これにより、製品を動的に絞り込むことができ、のオプションを使用してを切り替えることができます。イメージでわかるように、「メトリック」オプションを選択すると、すべてのページがメトリックベースの製品、サイドバー、およびページ全体に基づいて変更されます。 URLがあまり変更されていないのは興味深いことです。 「メトリック」オプションをクリックしてページを再読み込みしていないことを意味します。 before clicking the "metric" option

after clicking the "metric" option

だから、私はちょうどHTML、CSSとJavaScriptを使用してこのような気にいらを持つことができますか？

Answer 1

質問が広すぎます。あなたは実際にコードを思いついてからコミュニティに助けられるようにここに投稿する必要があります。

フィルタオプションに基づいてページコンテンツを更新するには、Ajaxを使用します。

シンプルなフィルタリングは、ページにいくつかのアイテムが既に表示されていて、フィルタに基づいていくつかが表示され、その他が非表示になる場合です。

以下は簡単な例です。青はメトリック、緑はインチです。また、クリアをクリックすると、フィルタリングがクリアされます。これは最も簡単なフィルタです。

$(".filter span").click(function(){ 
 
    
 
    $(".filter span").removeClass("selected"); 
 
    
 
    $(this).toggleClass("selected"); 
 
    
 
    var theClass = $(this).attr("class"); 
 
    theClass = theClass.replace(" selected",""); 
 
    
 
    if (theClass === "metric") { 
 
    $(".items .inch").hide(); 
 
    $(".items .metric").show(); 
 
    } else if (theClass === "inch"){ 
 
     $(".items .inch").show(); 
 
     $(".items .metric").hide(); 
 
     
 
     } else { 
 
     $(".item").show(); 
 
     $(".filter span").removeClass("selected"); 
 
     } 
 
    
 
    });

.filter { 
 
    width: 100%; 
 
    display: block; 
 
    float: left: 
 
    } 
 

 
.items { 
 
    width: 100%; 
 
    display: block; 
 
    float: left; 
 
    } 
 

 
.item { 
 
    display: block; 
 
    float: left; 
 
    width: 10%; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
    border: solid 1px #ccc; 
 
    padding: 10px; 
 
    text-align: center; 
 
    } 
 

 
.items .inch { 
 
    background: #0f0; 
 
    } 
 

 
.items .metric { 
 
    background: #00f; 
 
    } 
 

 
.filter span:hover { 
 
    cursor: pointer; 
 
    font-weight: 900; 
 
    padding: 2px; 
 
    border: solid 1px #000; 
 
    } 
 

 
.selected { 
 
    font-weight: 900; 
 
    padding: 2px; 
 
    border: solid 1px #000; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="filter"> 
 
    Choose: <span class="metric">metric</span> <span class="inch">inch</span><span class="clear"> clear</span> 
 
    </div> 
 
<ul class="items"> 
 
    
 
    <div class="item metric">1. metric</div> 
 
    <div class="item inch">2. inch</div> 
 
    <div class="item metric">3. metric</div> 
 
    <div class="item metric">4. metric</div> 
 
    <div class="item inch">5. inch</div> 
 
    <div class="item metric">6. metric</div> 
 
    <div class="item metric">7. metric</div> 
 
    <div class="item inch">8. inch</div> 
 
    <div class="item metric">9. metric</div> 
 
    
 
    
 

 
    
 
    
 
    </ul>