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

我在一个网站上工作，它的“关于我们”页面上有一个缩略图导航，你点击的每个人的个人资料都显示在同一个框中。然后单击配置文件底部的“关闭”，它会将您带回缩略图

到目前为止，我有以下几个部门

<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>

在名为“人”的部门里我有

<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来生成此行为，以便它删除单击close按钮时创建的css属性

---

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

不要这样做。只需根据需要显示/隐藏它们：

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

及

这样做的原因是您希望尽可能少地放入标记HTML。如果可以假设可以从列表中的位置推断ID，则可以通过从链接中删除ID来进一步更改此设置。这只是一种可能的改变

在标记容器和缩略图等页面元素时，使用ID似乎是合适的。Plus ID查找比其他方法快得多。

试试看

我刚刚意识到你想要的与我最初提出的完全相反，但首先：最好将你的div id命名为锚定标记的确切的名称为text，并且为了有一个文本来单击div中的某些内容：

<div id="container">
    <div class="thumbnails"></div>//I don't even use this, so if you don't use it for something else you can get rid of this line
    <div id="Profile-1">first one</div>
    <div id="Profile-2">second one</div>
    <div id="Profile-3">third one</div>
    <div id="Profile-4">fourth one</div>
</div>
<ul id="thumbnails">
    <li><a href="#">Profile-1</a></li>
    <li><a href="#">Profile-2</a></li>
    <li><a href="#">Profile-3</a></li>
    <li><a href="#">Profile-4</a></li>
</ul>

<script>
    $(function () {
        $('#container').hide(); //hide the links in the list
        $('#thumbnails a').click(function () {  // bind the li's click event
            var id = $(this).text();
            $("#container div").each(function () {
                if ($(this).attr("id") == id) {
                    $(this).show().parent().show();
                }
                else {
                    $(this).hide();
                }
            });
        });
    });
</script>

//我甚至不用这个，所以如果你不把它用在其他事情上，你可以去掉这条线
第一个
第二个
第三个
第四个






$（函数（）{
$（“#容器”）.hide（）；//隐藏列表中的链接
$（“#缩略图a”）。单击（函数（）{//绑定li的单击事件
var id=$（this.text（）；
$（“#容器分区”）。每个（函数（）{
if（$（this）.attr（“id”）==id）{
$（this.show（）.parent（）.show（）；
}
否则{
$（this.hide（）；
}
});
});
});

您还可以尝试修改HTML，使配置文件和缩略图位于同一结构中

<ul>
    <li class="person">
        <div class="thumbnail"></div>
        <div class="profile"></div>
    </li>
</ul>

---

（上面的示例假设div.profile.visible css类用于显示配置文件。）

不要忘记“return false；”最后，否则将遵循链接。诚然，它只会跟随“URLhere”，但这可能仍然很烦人，因为它会将页面滚动到顶部有了这个建议，即使返回false，我也无法阻止链接被跟踪。我的语法错了吗？请将其加载到Firefox中，并检查您的错误控制台中是否存在Javascript错误。单击缩略图时，您是否希望：哪一个只是一个项目符号？或者您希望在单击匹配的div时使用？您好。只有在读了我写的东西之后，我才意识到我的问题听起来有多么模棱两可。我应该提供一个模型。谢谢大家的建议。这是正确的，但是单击缩略图后如何隐藏它们呢。我希望一次只显示一个div，包括缩略图。这只显示一个div。您希望它只显示已单击的配置文件链接吗？但这会隐藏所有其他的，让你必须刷新页面，以选择另一个'div'是的，这就是我要找的。然后，每个配置文件中都会有一个链接，可以让您返回到缩略图分区。只需添加以下两行：$（“#缩略图li a”）.hide（）$（这个）；在“单击”之后但在“每个”之前

<ul>
    <li class="person">
        <div class="thumbnail"></div>
        <div class="profile"></div>
    </li>
</ul>

$('div.thumbnail').click(
    $('div.profile').removeClass('visible'); // hide any visible profiles
    $(this).siblings('div.profile').addClass('visible'); // show the adjacent profile
);