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

 

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]

.navtab { height:27px;}
  .navtab li { float:left; width:83px; height:27px; line-height:27px; background:url(/image/dh_bg.gif); cursor:pointer; margin:0 3px 0 0; text-align:center; color:#000; }
  .navtab .active{background:url(/image/dh_bg_hover.gif);font-weight:bold;color:#fff;}
   .navtab .active a { color:#fff; text-decoration:none;}
  .navContent { clear:both; width:544px;border:1px solid #ccc; padding:7px;}

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

[/replyview]

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

 

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

 

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

 

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

 

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

 

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

好贴~我顶，以前没看到

顶顶顶

看看是如何实现的 正在为这个头疼呢

好像是个很不错的东西，先顶了再说

shenme  a 

强

你无需任何投入你无需积压商品你可以不租场地你可以不雇员工你只需一台电脑一根网线注册一个免费网店拍拍淘宝易趣把我们的护肤品图片放在网店上有人购买时我们为你免费代发货无风险无库存，稳稳当当赚利润喝着咖啡，点点鼠标，聊聊QQ月收入几千元轻松自如这样的无本创业，你何乐不为？敬请关注：www.beautybestshop.com※数百个品牌，上千种商品！※免费做网店代理，零风险，零库存，1件起代发货！不收任何手续费！※同等质量比价格，同等价格比质量，我们一定有让您和您的顾客最满意的产品！※件件正品，保证质量，专业配送，让您省心、安心！※日日有新品，天天有惊喜！旺旺:beautybestshopQQ:1398251386QQ:1245332704

学习了