如何将动作绑定到jQuery中的链接？

Question

我正在开设一个网站,其上有关于我们页面的缩略图导航,对于每个人,你点击他们的个人资料都显示在同一个框内.然后单击配置文件底部的"关闭",它将返回缩略图.

到目前为止,我有以下div ...

<div class="container">

    <div class="thumbnails"></div>
    <div id="profile-1"></div>
    <div id="profile-2"></div>
    <div id="profile-3"></div>
    <div id="profile-4"></div>

<div>

在名为"人"的div里面,我有......

<ul>
    <li class="thumbnail-1"><a href="#">Profile 1</a></li>
    <li class="thumbnail-2"><a href="#">Profile 2</a></li>
    <li class="thumbnail-3"><a href="#">Profile 3</a></li>
    <li class="thumbnail-4"><a href="#">Profile 4</a></li>
</ul>

我的想法是绝对定位所有div,以便它们彼此叠加,然后隐藏文档加载的所有配置文件.

然后,当单击缩略图时,将display:block和z-index:100绑定到相应的配置文件,强制配置文件显示在缩略图的顶部.

我的问题是,这是最好的方法吗？我需要什么jquery来生成这种行为,以便它删除单击关闭按钮时创建的css属性？

非常感谢您的时间和帮助.

Answer 1

不要那样做.只需显示/隐藏它们即可:

$("#thumbnails a").click(function() {
  var id = "profile" + this.id.substring(1);
  $("#container").children().hide();
  $("#" + id).show();
  return false;
});

假设以下内容略有改变:

<div id="container">
  <div class="thumbnails"></div>
  <div id="profile-1"></div>
  <div id="profile-2"></div>
  <div id="profile-3"></div>
  <div id="profile-4"></div>
<div>

和

<ul id="thumbnails">
  <li><a id="t-1" href="#">Profile 1</a></li>
  <li><a id="t-2" href="#">Profile 2</a></li>
  <li><a id="t-3" href="#">Profile 3</a></li>
  <li><a id="t-4" href="#">Profile 4</a></li>
</ul>

原因是你希望尽可能少地使用HTML标记.如果您可以假设您可以从列表中的位置推断出ID,则可以通过从链接中删除ID来进一步更改此设置.这只是一种可能的改变.

当您标记容器和缩略图等页面元素时,ID的使用似乎也是合适的.ID ID查找比替代品快得多.