如何实现tab之间的切换

我看到很多的网上商店的产品展示中,都会用多个tab之间的切换,而且使用js控制.我的客户也不例外,他说书籍的内容简介,作者简介,目录采用tab的方式显示在同一个区域,鼠标移上就可以切换.

在右边栏的流行书籍中,我使用quicktabs实现了这样的功能.但是在书籍的展示页面,实现类似的功能,使用后台的quicktabs管理界面不能直接配置出来.这里先介绍一下, 内容简介,作者简介,目录都是书籍的属性,也就是对应着一个字段.

Jason在他的文章中,通过编写模块代码,实现了同样的功能.但是在我的项目中,我不想这样.我决定采用一种比较简单方式,那就是编辑结点模板文件,在这里就是编辑node-product.tpl.php文件。

怎么实现，就是将quicktabs生成的html模板拷贝出来，使用firebug查看，然后进行提炼，把这些html片段放到node-product.tpl.php文件中。

片段如下所示：

<div class="quicktabs_wrapper">

       <ul class="quicktabs_tabs">

              <li class="active"><a href="#">書籍簡介</a></li>

              <li><a href="#">作者簡介</a></li>

              <li><a href="#">圖書目錄</a></li>

       </ul>

       <div class="quicktabs_main">

              <div class="quicktabs" style="display: block;"><?php   print $node->content[body]['#value']?></div>

              <div class="quicktabs" style="display: none;"><?php print  $field_author_info[0][value] ?></div>

              <div class="quicktabs" style="display: none;"><?php print  $field_tushumulu[0][value] ?></div>

       </div>

       </div>

这些都是由quicktabs生成的，直接使用这些html就不需要自己写js代码了，因为quicktabs的js已经加载了。

当然这里又是硬编码。这3个属性就被固定到这里了。值得注意的是，拷贝了的第一个div的class原来为“quicktabs_wrapper quicktabs-processed”，在这里我把它改为了“quicktabs_wrapper”，因为不该js不起作用。我记得在网上，看到一个和quicktabs类似的模块就是让人这么用的，所以我就直接套用现有的html模板就可以了，这样的好处就是外观和其它的quicktabs保持一致了。方便。

相关链接: http://zhupou.cn