当前位置：文江博客话题详情

Basecamp 风格游览页面 - jquery 使用导航菜单替换 div

发布于 2024-12-11 05:57:31 字数 287 浏览 0 评论 0原文

我正在尝试美化我网站上的旅游页面，我喜欢 37signals 的 Basecamp 旅游的外观： http://basecamphq.com/tour/#/communicate

我假设他们使用 Jquery 或其他一些相当于交换 div 的东西，但我是一个完全的 jquery 菜鸟，不知道如何去做。

如果有人有任何建议或资源向我指出这方面的问题，我将不胜感激。

干杯!

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

终止放荡 2024-12-18 05:57:31

您将在每个子页面的游览页面上都有导航链接，它们可能是这样的：

<ul>
  <li>
    <a href="#stuff1" class="tour-nav-link" id="l-1" data-content-id="t-1">Stuff 1</a>
  </li>
  <li>
    <a href="#stuff2" class="tour-nav-link" id="l-2" data-content-id="t-2">Stuff 2</a>
  </li>
</ul>

注意链接中的 data-content-id 属性，您将相应的 div 标签的 ID 放入其中作为匹配的方式他们起来。

您还可以将每个游览“子页面”放在自己的 div 中。您的游览页面将包含如下代码：

<div id="t-1" class="tour-item first">
  Stuff goes here
</div>
<div id="t-2" class="tour-item">
  Different stuff goes here
</div>

使用 CSS，您可以隐藏除第一个 div 之外的所有 div。这将进入你的CSS文件：

div.tour-item { display: none; }
div.tour-item.first { display: block; }

现在你只需要使用jquery切换点击链接的可见性：

$('a.tour-nav-link').live('click', function(){
  /* This next line using an animation to hide all div's that are not the selected one */
  $('div.tour-item').not('div#' + $(this).data('content-id')).slideUp();
  /* This will now animate to bring into view the selected one */
  $('div#' + $(this).data('content-id')).slideDown();
});

你可以使用其他动画，或者如果你想要的话，只使用.show()和.hide()..

You would have your navigation links on the tour page for each sub-page, they might be like this:

<ul>
  <li>
    <a href="#stuff1" class="tour-nav-link" id="l-1" data-content-id="t-1">Stuff 1</a>
  </li>
  <li>
    <a href="#stuff2" class="tour-nav-link" id="l-2" data-content-id="t-2">Stuff 2</a>
  </li>
</ul>

Notice the data-content-id attribute in the links, you put the ID of the corresponding div tag into those as a way to match them up.

You would also have each of your tour "sub-pages" in their own div. Your tour page would contain code like this:

<div id="t-1" class="tour-item first">
  Stuff goes here
</div>
<div id="t-2" class="tour-item">
  Different stuff goes here
</div>

Using CSS, you can then hide all div's except the first one. This would go in your CSS file:

div.tour-item { display: none; }
div.tour-item.first { display: block; }

Now you just need to switch the visibility on click of the links with jquery:

$('a.tour-nav-link').live('click', function(){
  /* This next line using an animation to hide all div's that are not the selected one */
  $('div.tour-item').not('div#' + $(this).data('content-id')).slideUp();
  /* This will now animate to bring into view the selected one */
  $('div#' + $(this).data('content-id')).slideDown();
});

You can use other animations, or just .show() and .hide() if you want..

回复收藏 0 原文

~没有更多了~