Question

当您打开顶部的yahoo main page时，会有一个搜索部分，其中包含以下链接：网络，图片，视频，更多

单击链接时，将激活所选部分，并且正在更改搜索按钮的文本。更新页面的唯一部分是顶部的搜索部分，网站的其他部分不受影响。

我的问题是这是如何实施的？更重要的是，行为可能类似使用VS 2008在.net中实现？

链接是真的链接还是仅模仿链接行为的不同元素？是否需要使用ajax，或者只是使用某些css技术预装和隐藏所有内容？

更改标签时，同一页面上的新闻栏目使用的技术是相同的：新闻，体育，娱乐，视频？

谢谢

Answer 1

这实际上是使用CSS和Javascript完成的：

<ul id='menu'>
  <li><a href="#web_search" class='active'>Web</a></li>
  <li><a href="#image_search">Image</a></li>
  <li><a href="#video_search">Video</a></li>
  <li><a href="#local_search">Local</a></li>
</ul>

<div id='web_search' class='search'></div>
<div id='image_search' class='search' style='display: none;'></div>
<div id='video_search' class='search' style='display: none;'></div>
<div id='local_search' class='search' style='display: none;'></div>

然后Javascript（示例使用jQuery，可以通过多种方式完成......）：

$('a','#menu').click(function() {
    $('div.search').hide();
    $('a.active', '#menu').removeClass('active');
    $($(this).addClass('active').attr('href')).show();
    $(this).blur();
    return false;
});

And this is an example of it in action。样式等都是CSS。

Answer 2

使用Firebug快速检查搜索字段后，单击每个搜索类型链接（Web，图像等）似乎只是修改了DOM。这包括添加字段，删除字段，切换类名等。如果隐藏字段也被操作，我不会感到惊讶。

这样的行为是使用JavaScript完成的。具体而言（在非常高级别），链接附加了事件处理程序，每个链接都以自己的方式修改DOM。

它绝对可以使用Visual Studio 2008实现，因为它真的（可能）只是CSS，JavaScript和HTML。在您准备好接受指定的查询并开始针对您的数据存储运行它之前，.NET真的不会发挥作用。

Paolo's answer提供了一个非常好的，直截了当的例子，说明了如何模仿这种行为。

Answer 3

这些链接附带了onlclick JavaScript处理程序。当您单击它们时，不同的选项卡变为可见，当前选项卡将被隐藏。所有选项卡都已预先加载，但最初只能显示第一个选项卡。

从ASP.NET AJAX控件工具包中查看Tabs control。您可以自定义标签，使其看起来像链接。

雅虎中的搜索类型链接 - 如何实现类似的行为

3 个答案: