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>

在名为“people”的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查找比其他选择快得多。

Answer 2

尝试Demo

我刚刚意识到你想要与我最初提出的完全相反，但是对于一个：将你的div标识为你的锚标记的完全名称作为文本，这样会很好，所以，并且为了让文字点击某些内容必须在你的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>

$(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();
   }
  });
 });
});

Answer 3

您还可以尝试以配置文件和缩略图位于同一构造中的方式修改HTML。

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

你仍然可以使用div.profile：s的绝对定位，但你的javascript会更容易（并且不需要任何字符串操作），因为你只需要找到一个兄弟元素。

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

（上面的例子假设div.profile.visible css-class用于显示个人资料。）

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

3 个答案: