CSS标签切换代码实例教程 比较漂亮(标签栏切换代码js)

我们的设计越来越追求一种简洁的风格，希望在有限的空间内展示更多的内容。与此同时我们发现一些问题，内容的简单排列总使页面很长。滚屏很多才能将显示的内容布局完毕。YAHOO与网易率先应用了标签切换的布局方式，打破了常规布局的局限性，在相同尺寸的区域内，可以放置更多的内容。我们只需要点击不同的选项卡或链接就能展开内容，这并不需要打开新的网页，只是在同一页内完成。 一、标签切换总体的实现思路： 　　实现这种标签切换的布局有多种方式，也流传着各种不同的代码，我们应用DIV CSS进行布局，首先来整理一下思路，如何实现这样的标签切换效果： 　　1、首先要放置标签切换的容器，可以是选项卡形式，也可以是链接的形式； 　　2、放置具体的内容，并默认显示其中的一个为显示状态。其它的内容则进行隐藏； 　　3、当用户点击选项卡或链接时，应用javascript切换到指定的层进行显示，而其它的内容层进行隐藏； 　　4、进行后期深入，例如，去除链接虚线与内容层图文的美化等。 　　我们看最终本实例的效果图片： 二、根据上面的思路我们开始整理HTML代码。我们作了如下规划： <div class="woaicss"> <ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle"> </ul> <div class="woaicss_con" id="woaicss_con1" style="display:block;"> </div> <div class="woaicss_con" id="woaicss_con2" style="display:none;"> </div> <div class="woaicss_con" id="woaicss_con3" style="display:none;"> </div> <div class="woaicss_con" id="woaicss_con4" style="display:none;"> </div> </div> 　　1、我们布置一个总体的容器，并应用类woaicss。 　　2、设置一个无序列表UL作为选项卡或链接的容器（下面详细介绍）。 　　3、我们分别设置了四个层，作为内容层（我们假想有四个切换）。请特别注意这四个层均应用了类 woaicss_con。与此同时为他们分别指定了不同的id。这是为了让javascript可以进行控制。我们设置第 一个层的样式为块元素，即显示出该内容层。而其它三层均进行了隐藏。 三、我们开始进一步完善HTML代码。无序列表UL增加一些链接： <ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle"> <li><a href="javascript:void(0)" onclick="javascript:woaicssq(1)">CSS.com</a></li> <li><a href="javascript:void(0)" onclick="javascript:woaicssq(2)">Div CSS教程 </a></li> <li><a href="javascript:void(0)" onclick="javascript:woaicssq(3)">CSS布局实例 </a></li> <li><a href="javascript:void(0)" onclick="javascript:woaicssq(4)">WEB标准化</a></li> </ul> 　　1、我们为无序列表UL应用了两个类woaicss_title、woaicss_title_bg1，第一个类可以对UL及LI、 链接进行整体的外观控制。以实现整体美化效果。我们也为无序列表UL指定了一个id为woaicsstitle，目 的在于可以应用javascript进行样式控制。 　　2、我们增加了四个链接，并对链接目标指定为：javascript:void(0)。我们应该了解，当链接为“# ”时，浏览器会回到页面顶部。而此处我们并不希望看到这样的结果，因为在很多情况下，我们的切换框 并不一定是在网页的第一屏，如果点击链接回到顶部，访客就不会立即看到内容层所出现的变化。失去了 制作标签切换效果的意义。 　　3、我们为链接设置了onclick动作avascript:woaicssq(x)。我们在这里向javascript传递参数，以 执行不同的脚本，实现切换的效果。 四、开始进行javascript脚本的编写： function woaicssq(num){ for(var id = 1;id<=4;id++) { var MrJin="woaicss_con"+id; if(id==num) document.getElementById(MrJin).style.display="block"; else document.getElementById(MrJin).style.display="none"; } if(num==1) document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg1"; if(num==2) document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg2"; if(num==3) document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg3"; if(num==4) document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg4"; } 　　javascript脚本工作原理作简要的说明： 　　（由于本站CSS.com仅针对CSS进行讨论，这里对此脚本不作详细分析） 　　1、设置函数woaicssq，并从标签切换的链接中获取参数，如：javascript:woaicssq(2) 　　2、声明变量id为数值为1并小于等于4。这是我们四个内容层的数值。 　　3、声明变量MrJin为"woaicss_con"+id; （请注意我们在第一步骤所设置内容层的id，如： id="woaicss_con2"。）当id为所指定的数值时，则该层的属性为display="block";。否则层的属性为 display="none"。即实现了内容层显示与隐藏的切换功能。 　　4、当变量id为1-4其中的某一个数值是，对id为woaicsstitle的容器进行样式定义，如： woaicss_title woaicss_title_bg3。这样我们就可以通过不同的class类，对切换链接进行不同的样式定 义，当某一层显示的时候，我们可以对该层所对应的链接作出一些指示。如选项卡的突出状态等。 五、开始CSS的编写： * { list-style-type:none; font-size:px; text-decoration:none; margin:0; padding:0; } 　　总体布局声明，去除列表项预设标记，设置文字大小为px，去除文字装饰线，外边距与内边距均为 零。 .woaicss { width:px; height:px; overflow:hidden; margin:px auto; } 　　总体标签切换窗口的样式定义，宽高设置，溢出为隐藏，上下外边距为px，左右为自动，实现水平 居中对齐。 .woaicss_title { width:px; height:px; background:#fff url(btn_bg.png) no-repeat; overflow:hidden; } 　　无序列表UL的样式，宽高设置，背景图片为btn_bg.png。 .woaicss_title li { display:block; float:left; margin:0 2px 0 0; display:inline; text-align:center; } 　　无序列表内列表项的样式，设置为块元素并应用向左的浮动，右侧外边距为2px。将列表项内联，文 字对齐方式为居中。 .woaicss_title li a { display:block; width:px; heigth:px; line-height:px; color:#fff; } 　　列表项链接的样式，设置为块元素并指定了宽高，行高为px，颜色为白色color:#fff； .woaicss_title li a:hover { color:#f0f0f0; text-decoration:underline; } 　　列表项链接的悬停样式，颜色为#f0f0f0，加下划线作为装饰线。 .woaicss_title_bg1 {background-position:0 0;} .woaicss_title_bg2 {background-position:0 -px;} .woaicss_title_bg3 {background-position:0 -px;} .woaicss_title_bg4 {background-position:0 -px;} 　　此四个样式的定义请与步骤四javascript脚本进行联系。即在函数的值变化时，相应的对无序列表的 样式进行重新定义，我们在此处对背景图定位进行了调整，实现了选项卡片的突出状态。 .woaicss_con { display:block; width:px; height:px; background:url(con_bg.png) no-repeat 0 0; overflow:hidden; } 　　内容层的样式定义，指定宽高，并设置背景图片con_bg.png。CSS.com请您特别注意，这里的背景 图片与无序列表UL的背景图片应该是无缝结合。即从外观上它们两者是一个整体。 六、内容充实： 　　我们为内容层填充一定的内容，并对其进行美化，例如：（仅说明其一，其它三个雷同。） <ul> <li><a href="#" title="">Web Developer插件教程 CSS网页布局辅助设计利器！详细图文讲解 ！</a></li> <li><a href="#" title="">CSS Templates 频道4月5日更新 增加模板套</a></li> <li><a href="#" title="">XHTML与CSS入门经典 从零开始系列教程！</a></li> <li><a href="#" title="">DIV+CSS布局入门示例（目录）</a></li> <li><a href="#" title="">CSS基础教程篇 [翻译Htmldog]</a></li> <li><a href="#" title="">DIV CSS布局实例：用css网站布局之十步实录！（目录） </a></li> <li><a href="#" title="">WEB2.0标准教程 循序渐进十二天的基础学习！</a></li> <li><a href="#" title="">Div+CSS 网页布局 教程！</a></li> </ul> 　　我们充实的内容层为一个UL无序列表，我们对其进行样式定义： .woaicss_con ul { width:px; height:px; margin:px auto; } .woaicss_con li { width:px; line-height:px; margin:0 auto; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; } .woaicss_con li a { color:#c; } .woaicss_con li a:hover { color:#; text-decoration:underline; } 　　此处不是本文重点，所以不再赘述，相关的知识请参考：>>> CSS.com关于列表UL制作的文章 <<< 七：细节修饰 　　我们这里的链接并未起到真正的URL转向的作用，仅是一个标签，所以我们可以将其虚线框去除，以 让我们的页面更加的工整与自然。将下面的代码另存为xuxian.htc文件： <public:attach event="onfocus" onevent="hscfsy()"/> <script language="javascript"> function hscfsy(){ this.blur(); } </script> 　　我们在CSS样式中添加这一句代码：a {behavior:url(xuxian.htc)} 　　这样就可以去除了链接虚线框（请注意 在FF中此效果无效）。 八：最终效果及举一反三： 　　我们最终即可实现了这样的效果，您可以 >>> 点击这里查看 <<< 　　在我们的实现工作中可能会遇到另外一种情况： 　　我们需要实现当鼠标划过时进行切换，当鼠标点击时打开相应内容的链接。 　　我们将无序列表UL作如下修改即可实现： <ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle"> <li><a href="#" onmouseover="javascript:woaicssq(1)">CSS.com</a></li> <li><a href="#" onmouseover="javascript:woaicssq(2)">Div CSS教程</a></li> <li><a href="#" onmouseover="javascript:woaicssq(3)">CSS布局实例</a></li> <li><a href="#" onmouseover="javascript:woaicssq(4)">WEB标准化</a></li> </ul> 　　我们通过些微的调整即实现了这样的效果，

推荐整理分享CSS标签切换代码实例教程 比较漂亮(标签栏切换代码js)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:css 换行标签,标签栏切换代码js,标签栏切换代码js,css code标签,标签栏切换效果css源代码,css修改标签内容,css标签切换代码是什么,标签栏切换效果css源代码,内容如对您有帮助，希望把文章链接给更多的朋友！

CSS的margin边界叠加深度剖析图文演示 边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。

CSS中Float（浮动）相关技巧文章 Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然

惊现学习CSS应该注意的方法 学习任何东西都是一样，从小学、中学、大学，除了学习知识外就是去学习方法！要想掌握CSS,首先要学会HTML，我刚开始是从零开始学习的，花了一个月