1

私はJqueryが初めてで、自分のWebサイト用に次のフィルターを作成できたことに大喜びしています。次にやりたいことは、誰かがオプションをクリックしたときです。たとえば、フォトショップです。その後、次のdivをどのように適用できますか? -

<span id="all" class="label label-primary">photoshop</span>

次に、allなどの別のオプションをクリックすると、そのdivをPhotoshopから削除してすべてに配置する必要があります。

$("#all").click(function(){
    $(".webdesign").show();
    $(".photoshop").show();
    $(".games").show();
})
$("#webdesign").click(function(){
    $(".webd").show();
    $(".photoshop").hide();
    $(".games").hide();
})
$("#photoshop").click(function(){
    $(".webd").hide();
    $(".photoshop").show();
    $(".games").hide();
})
$("#games").click(function(){
    $(".webd").hide();
    $(".photoshop").hide();
    $(".games").show();
})
4

3 に答える 3

1

見逃しているのがハイライトだけの場合は、次のようなものを試すことができます（取得したものにマージされます）

$(".filter > li").click(function(){
    $(this).siblings().removeClass("active");
    $(this).addClass("active");
});

@Graham のデモに追加すると、次のようになります: http://jsfiddle.net/38sYd/1/

于 2013-09-02T11:02:44.367 に答える
1

ここにjsfiddleがあります

ここにHTMLがあります

<div class="labels">
  <span id="all" class="label active">All</span>
  <span id="photoshop" class="label">Photoshop</span>
  <span id="games" class="label">Games</span>
</div>

<div id="container">
  <div class="photoshop"></div>
  <div class="games"></div>
  <div class="photoshop"></div>
  <div class="games"></div>
  <div class="photoshop"></div>
  <div class="games"></div>
</div>

CSS

.label.active {
  background-color: #4EB478;
  font-size: 14px;
  color: #fff;
}

.label {
  cursor: pointer;
  display: inline-block;
  padding: .25em .6em;
  font-weight: 500;
  line-height: 1;
  color: #4EB478;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  margin-bottom: 10px;
}

.container {
  display: block;
}

.photoshop {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #321;
}

.games {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #789;
}

そしてJavaScript

$("#all").click(function(){
  $("#container div").show();
})
$("#webdesign").click(function(){
  $(this).siblings().removeClass("active");
  $(this).addClass('active');
  $("#container div").hide();
  $('.webd').show();
})
$("#photoshop").click(function(){
  $(this).siblings().removeClass("active");
  $(this).addClass('active');
  $("#container div").hide();
  $('.photoshop').show();
})
$("#games").click(function(){
  $(this).siblings().removeClass("active");
  $(this).addClass('active');
  $("#container div").hide();
  $('.games').show();
})
于 2013-09-02T10:56:27.640 に答える