評価ボタンフィルタ

Question

私はアカウントシステムのような優れたに悪いから私のリストをフィルタリングすることにしようとしているが

if you are going to click this link 、あなたは私が話しているかを理解し、私は私が何をしたい画像上のセクションを表示しますする。

ボタンをクリックすると、スタイリングが削除または追加され、ホテルリストが表示されているのを見たことがありますか？すべての例では、このコードで

* { 
 
    outline: none; 
 
} 
 

 
button { 
 
    cursor: pointer; 
 
    background: transparent; 
 
    border: none; 
 
    padding: 10px; 
 
} 
 

 
#wrap { 
 
    width: 960px; 
 
} 
 

 
#wrap:before, 
 
#wrap:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
#filter { 
 
    width: 40%; 
 
    float: left; 
 
} 
 

 
#content { 
 
    float: right; 
 
    width: 59%; 
 
    margin-left: 1%; 
 
    font-size: 12px; 
 
    font-family: sans-serif; 
 
} 
 

 
.filter-list { 
 
    border: 1px solid #ccc; 
 
    margin-bottom: 5px; 
 
    padding: 10px; 
 
}

<main id="wrap"> 
 

 
    <div id="filter"> 
 
    <button class="bad" data-id="1" style="background:#cc0033;color:#fff" name="rating">bad</button> 
 
    <button class="normal" data-id="2" style="background:orange;color:#fff" name="rating">normal</button> 
 
    <button class="good" data-id="3" style="background:#99cc00;color:#fff" name="rating">good</button> 
 
    <button class="verygood" data-id="4" style="background:green;color:#fff" name="rating">very good</button> 
 
    <button class="excellent" data-id="5" style="background:darkgreen;color:#fff" name="rating">excellent</button> 
 
    </div> 
 
    <!-- filter--> 
 

 
    <div id="content"> 
 
    <div class="filter-list"> 
 
     I'm a very good 
 
    </div> 
 
    <div class="filter-list"> 
 
     this is the bad list 
 
    </div> 
 
    <div class="filter-list"> 
 
     I'm a very good to 
 
    </div> 
 
    <div class="filter-list"> 
 
     Excellent! 
 
    </div> 
 
    <div class="filter-list"> 
 
     Iııh normal! 
 
    </div> 
 
    <div class="filter-list"> 
 
     Good - enough thanks 
 
    </div> 
 
    <div class="filter-list"> 
 
     Bad - don't ever.. 
 
    </div> 
 
    <div class="filter-list"> 
 
     Excellent again 
 
    </div> 
 
    <div class="filter-list"> 
 
     isn't bad ? I think yes bad.. 
 
    </div> 
 
    </div> 
 

 

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

Answer 1

ルックは、そのアカウントのページのような作業があります！

$("button").on("click", function(){ 
 
    $(this).css("opacity", "1"); 
 
    $(this).nextAll().css("opacity", "1"); 
 
    $(this).prevAll().css("opacity", "0.5"); 
 
});

* { 
 
    outline: none; 
 
} 
 

 
button { 
 
    cursor: pointer; 
 
    background: transparent; 
 
    border: none; 
 
    padding: 10px; 
 
} 
 

 
#wrap { 
 
    width: 960px; 
 
} 
 

 
#wrap:before, 
 
#wrap:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
#filter { 
 
    width: 40%; 
 
    float: left; 
 
} 
 

 
#content { 
 
    float: right; 
 
    width: 59%; 
 
    margin-left: 1%; 
 
    font-size: 12px; 
 
    font-family: sans-serif; 
 
} 
 

 
.filter-list { 
 
    border: 1px solid #ccc; 
 
    margin-bottom: 5px; 
 
    padding: 10px; 
 
}

<main id="wrap"> 
 

 
    <div id="filter"> 
 
    <button class="bad" data-id="1" style="background:#cc0033;color:#fff" name="rating">bad</button> 
 
    <button class="normal" data-id="2" style="background:orange;color:#fff" name="rating">normal</button> 
 
    <button class="good" data-id="3" style="background:#99cc00;color:#fff" name="rating">good</button> 
 
    <button class="verygood" data-id="4" style="background:green;color:#fff" name="rating">very good</button> 
 
    <button class="excellent" data-id="5" style="background:darkgreen;color:#fff" name="rating">excellent</button> 
 
    </div> 
 
    <!-- filter--> 
 

 
    <div id="content"> 
 
    <div class="filter-list"> 
 
     I'm a very good 
 
    </div> 
 
    <div class="filter-list"> 
 
     this is the bad list 
 
    </div> 
 
    <div class="filter-list"> 
 
     I'm a very good to 
 
    </div> 
 
    <div class="filter-list"> 
 
     Excellent! 
 
    </div> 
 
    <div class="filter-list"> 
 
     Iııh normal! 
 
    </div> 
 
    <div class="filter-list"> 
 
     Good - enough thanks 
 
    </div> 
 
    <div class="filter-list"> 
 
     Bad - don't ever.. 
 
    </div> 
 
    <div class="filter-list"> 
 
     Excellent again 
 
    </div> 
 
    <div class="filter-list"> 
 
     isn't bad ? I think yes bad.. 
 
    </div> 
 
    </div> 
 

 

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

jQueryのは、ところで必要とされています！あなたはすでにあなたのスニペットにそれを含めました。