网页网页标签制作
源文章地址：
百事海豚系列教程---"页标签"制作
大家好，我是听棠，百事海豚开通不久，利用业余时间，写了几个教程，希望能给你解决确实的问题。
今天我主要是演示和讲一下“页标签”的制作过程，以下的代码为本人自创，我会给你讲清楚每一步的含义，当你理解了，手写也就不成问题了。
为什么要使用"页标签"效果：
使用"页标签"最主要是为了节省空间，就跟marquee一样，而且"页标签"的主动权在你手里，并能利用"页标签"体现多种风格。
不多说，先看一下面的效果图：
点击页标签，即可显示不同的页面显示。
示例地址：
源代码如下：
第一标签
第二标签
第三标签
第四标签
这是第一个页标签
这是第...全部
源文章地址：
百事海豚系列教程---"页标签"制作
大家好，我是听棠，百事海豚开通不久，利用业余时间，写了几个教程，希望能给你解决确实的问题。
今天我主要是演示和讲一下“页标签”的制作过程，以下的代码为本人自创，我会给你讲清楚每一步的含义，当你理解了，手写也就不成问题了。
为什么要使用"页标签"效果：
使用"页标签"最主要是为了节省空间，就跟marquee一样，而且"页标签"的主动权在你手里，并能利用"页标签"体现多种风格。
不多说，先看一下面的效果图：
点击页标签，即可显示不同的页面显示。
示例地址：
源代码如下：
第一标签
第二标签
第三标签
第四标签
这是第一个页标签
这是第二个页标签
这是第三个页标签
这是第四个页标签
代码讲解：
本代码是我自己手写的，所以大家一旦看懂了，以后就方便多了，页面控制原来如此顺手。
我使用了CSS的两个属性来实现"页标签效果"：
第一,"position:"属性有两个值："absolute":绝对定位
"relative":相对定位
第二，"visibility:"属性有两个值："visible":显示
"hidden":隐藏
第一步：制作相应的背景我表格
第一个是页标题，而且要把相应的页标题的四个背景做好，以便使用，给页标题的TR定义一个ID为"id_s_bg"，在脚本中将使用此ID来改变相应的背景。
在每个页标题上加上onclick="change_search(2);"事件以改变背景和表格显示。
第二个是相应的四个表格，每个表格都有相应的ID，如id="id_search1"，id="id_search2"。
。。。四个表格将都有自己相应的背景以区配页标题显示。第一个为默认的显示表格，无需定义style,而其他三个表格默认为隐藏并不占空间，所以必须使用style="position:absolute;visibility:hidden",position:absolute是必须的，这样表格才不会占空白空间，visibility:hidden也是必须，当然是为了隐藏了。
第二步：脚本部分
脚本是非常简单的，hide_all函数，将把四个表格全部隐藏，使用的方法为直接修改表格的定位与隐藏，这里要注意的是如果直接定位到指定的表格，ID方式是最直接而且最安全的方式， tElementById("id_search1")这样就可以定位到了，要当心大小写区分，由于循环使用了变量i,所以要使用eval()函数哦。
函数change_search（index）首先调用hide_all，把所有表格隐藏，然后改变页标题背景，最后把要显示的表格设为显示即可。
总结：
1）本代码主要使用了position与visibility就把显示与隐藏搞定，要注意的是隐藏（hidden）时一定要绝对(absolute)定位。
2）还有一点，就是灵活使用ID定位，这是页面最简单的，我经常遇到有人使用 mainname的方法，使用表单名最大的麻烦就是一旦表单名修改，不得不修改javascript脚本代码。好了。
希望你已经学会了。
3）在onclick事件上，为了保持页面不跳回到顶部，使用javascript:void(null)。
作者：听棠
有什么问题请到百事海豚技术论坛：
百事海豚宗旨--"网络共享、经典收藏"
。
收起
