使用自定义按钮过滤结果

时间:2016-02-23 11:07:44

标签: javascript jquery html css

我正在尝试创建一个菜单,根据我制作的自定义按钮(只是可点击的文本)过滤结果。有没有人知道用自定义按钮而不是复选框创建过滤结果菜单的方法?任何帮助都会很棒!

我找到了使用复选框过滤结果的示例:

JSfiddle of filter results using check-boxes

作为一个例子,我将自己的按钮包含在复选框示例的格式中。

<script>
var Lst;
function changecolor(obj) {
  if (Lst) Lst.style.color = "#663399";
  obj.style.color = "red";
  Lst = obj;
}
</script>
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  line-height: 14px;
}
a:link {
  text-decoration: none;
  color: #000000;
}
a:visited {
  color: #000000;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  color: #0724fb;
}
a:active {
  text-decoration: none;
  color: #000000;
}
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" onclick="changecolor(this)">
  <li>1 bedroom</li>
</a>

<a href="#" onclick="changecolor(this)">
  <li>2 bedrooms</li>
</a>

<a href="#" onclick="changecolor(this)">
  <li>3 bedrooms</li>
</a>
<br>

<a href="#" onclick="changecolor(this)">
  <li>london</li>
</a>

<a href="#" onclick="changecolor(this)">
  <li>new york</li>
</a>

<a href="#" onclick="changecolor(this)">
  <li>paris</li>
</a>
<br>

<ul>
  1 bedroom apartment paris
  <br>1 bedroom apartment
  <br>3 bedroom apartment london
  <br>2 bedroom apartment new york
  <br>2 bedroom apartment paris
  <br>2 bedroom apartment london
  <br>3 bedroom apartment new york
  <br>1 bedroom apartment london
  <br>2 bedroom apartment new york
</ul>

1 个答案:

答案 0 :(得分:1)

根据您提供的复选框示例,我刚刚更新了代码,而是使用您在所选项目上切换的类,从而允许您根据需要设置样式。

请参阅小提琴http://jsfiddle.net/bdum8euw/1/

<iframe src='@Url.Action("ActionName", "ControllerName")'></iframe>