1

我是 Jquery 的新手，我非常高兴我已经能够为我的网站创建以下过滤器，我接下来要做的是当有人点击一个选项（例如 photoshop）时，我该如何应用以下 div -

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

然后，如果他们单击另一个选项，例如我需要从 photoshop 中删除该 div 并将其放在所有选项上。

$("#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

这是一个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 回答
1

如果你所缺少的只是亮点，你可以尝试这样的事情（合并到你得到的）

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

添加到@Graham 的演示中，它会是这样的：http: //jsfiddle.net/38sYd/1/

于 2013-09-02T11:02:44.367 回答
0

就看你想怎么摆放了span。你可以做任何一种方式：

var html = "<span id="all" class="label label-primary">photoshop</span>";
$("#someid").on('click', function(){
 //stuff
 $(this).append(html);
 //or
 //$(html).insertAfter($(this));
});

如果你想删除使用

$("#someid").on('click',function(){
 if($("#all").length > 1){ //lets check if the span exist 
   $("#all").remove();
 }
//then append or insertafter
});
于 2013-09-02T10:48:47.413 回答