首先呢，申明一下，这个切片或者叫选项卡的制作呢，是来源于科讯自带的模板，是哪个版本我忘记了。反正好早好早了。效果呢是，鼠标放在上面就会自动的转换的。不需要点击。至于演示么，见我的网站了。菏泽做网站

OK,下面切入正题。

首先，要准备一份JS。我建议放在  image 文件夹下面。取名为 tab.js

内容如下：

=====================

以下内容只有回复后才可以浏览,请先登录！

=============================

说实话，这其中是什么意思呢，我也不知道，不过问题不大，你只要看到我标注的红色的数字就行了。其中第一段没有，第二段为2，第三段为3.如果有第四段，那么就是4喽~以此类推，如果你愿意，你可以做100个。

蓝色的数字是说，你这个选项卡中有几个选项卡，可以小于这个数字。如，你需要用4个选项卡，这里写5是没关系的。但，你又6个选项卡，就必须写6了。明白？

=========

下面呢，就是如何在模板里使用了。

首先呢，在HEAD部分插入以下代码：

==============

<script src="/image/tab.js" type="text/javascript"></script>

==============

红色部分为你的路径名称，你的JS存在什么路径就要用什么路径。这句话看不懂的闪~

==============

接下来就是模板的书写了。

==============

<div class="navtab">
         <ul>
        <li class="active" id="tab_t1" onMouseOver="return swap_tab(1)"><a rel="adListContent1">工作室动态</a> </li>
        <li class="normal" id="tab_t2" onMouseOver="return swap_tab(2)"><a rel="adListContent1">日程安排</a> </li>
        <li class="normal" id="tab_t3" onMouseOver="return swap_tab(3)"><a rel="adListContent1">服务帮助</a> </li>
  <li class="normal" id="tab_t4" onMouseOver="return swap_tab(4)"><a rel="adListContent1">域名ICP备案</a> </li>
         </ul>  
   </div>
   <div class="navContent">

        <div id="tab_1"  class="tab_block"></div>
        <div id="tab_2" class="tab_none"></div>

        <div id="tab_3" class="tab_none"></div>

        <div id="tab_4" class="tab_none"></div>

</div>

===============

这个呢，就是第一个选项卡的写法，对应的是上文JS中的第一段，至于第二段怎么写，看下面的示例。

================

[replyview]

<div class="navtab">
         <ul>
        <li class="active" id="tab2_t1" onMouseOver="return swap_tab2(1)"><a rel=adListContent1>菏泽发展</a></li>
        <li class="normal" id="tab2_t2" onMouseOver="return swap_tab2(2)"><a rel=adListContent1>菏泽企业</a></li>
        <li class="normal" id="tab2_t3" onMouseOver="return swap_tab2(3)"><a rel=adListContent1>市场动态</a></li>
  <li class="normal" id="tab2_t4" onMouseOver="return swap_tab2(4)"><a rel=adListContent1>网络企业</a></li>
         </ul>  
   </div>

[/replyview]

=================

下面的内容部分是一样的。

切片部分，唯一的区别就是tab后面多了数字2。当然，第三段就是数字3喽！以此类推。

=================

如果仅仅是这样，还不能够实现选项卡，为什么呢？因为没有CSS的配合么。

CSS内容如下：

=================

[replyview]

.tab_block{display: block}
  .tab_none{display: none}

[/replyview]

=================

蓝色部分呢，是我修改的。以前官方的模板直接在html里面写上了display: none，造成的结果是搜索引起直接忽略这部分内容。造成SEO的空白。

因此，我将这个转到了CSS中。就不存在这个问题了。

=================

仔细的看懂里面东西，CSS你自己随意修改。其实，做个选项卡，是一件非常简单的事情，不是吗？

本教程由菏泽做网站提供，地方网络工作室专业制作网站，销售新网互联虚拟主机，并且操作域名快速ICP备案服务哦！联系方式请参见我们的官方网站。