CSSタグ切り替えコード例チュートリアルが比較的綺麗_体験交換

私たちのデザインは、限られたスペースでより多くのコンテンツを表示することを期待して、ますます簡潔なスタイルを追求しています。一方で、コンテンツをシンプルに配置するとどうしてもページが長くなってしまうという問題点も見つかりました。表示されたコンテンツをレイアウトするには、多くのスクロールが必要です。 YAHOO と NetEase は、タブ切り替えレイアウト方式を先駆けて採用し、従来のレイアウトの制限を打ち破り、同じサイズの領域により多くのコンテンツを配置できるようにしました。コンテンツを展開するには、別のタブまたはリンクをクリックするだけでよく、新しい Web ページを開く必要はなく、同じページ内で行うだけです。

1. ラベル スイッチングの全体的な実装アイデア:

このラベル スイッチングのレイアウトを実装するにはさまざまな方法があり、さまざまなコードも流通しています。ここでは DIV CSS を使用します。まず、このようなラベル切り替え効果を実現するためのアイデアと方法を整理しましょう:
1. まず、ラベル切り替え用のコンテナを配置します。これはタブまたはリンクの形式にすることができます。
2. 特定のコンテンツを配置します。デフォルトでは、そのうちの 1 つが表示されます。他のコンテンツは非表示になります。
3. ユーザーがタブまたはリンクをクリックすると、JavaScript を使用して指定されたレイヤーに表示が切り替わりますが、他のコンテンツ レイヤーは非表示になります。
4. 後で詳細な分析を実行します。たとえば、リンクの点線を削除し、コンテンツ レイヤーのグラフィックやテキストを美しくします。

この例の最終的な効果の図を見てみましょう:

二、根据上面的思路我们开始整理HTML代码。我们作了如下规划：

 

    

    

    

    

    

    

    

    

    

    

    

　　1、我们布置一个总体的容器，并应用类woaicss。
　　2、设置一个无序列表UL作为选项卡或链接的容器（下面详细介绍）。
　　3、我们分别设置了四个层，作为内容层（我们假想有四个切换）。请特别注意这四个层均应用了类
woaicss_con。与此同时为他们分别指定了不同的id。这是为了让javascript可以进行控制。我们设置第
一个层的样式为块元素，即显示出该内容层。而其它三层均进行了隐藏。

三、我们开始进一步完善HTML代码。无序列表UL增加一些链接：

 
    

        
• 52CSS.com

        
• Div CSS教程
  

        
• CSS布局实例
  
        
        
• WEB标准化

    

　　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    {
    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脚本工作原理作简要的说明：
　　（由于本站52CSS.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:12px; 
    text-decoration:none; 
    margin:0; 
    padding:0;
}
　　总体布局声明，去除列表项预设标记，设置文字大小为12px，去除文字装饰线，外边距与内边距均为
零。

 
.woaicss {
    width:438px; 
    height:300px; 
    overflow:hidden; 
    margin:50px auto;
}
　　总体标签切换窗口的样式定义，宽高设置，溢出为隐藏，上下外边距为50px，左右为自动，实现水平
居中对齐。

 
.woaicss_title {
    width:438px; 
    height:30px; 
    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:90px; 
    heigth:30px; 
    line-height:34px; 
    color:#fff;
}
　　列表项链接的样式，设置为块元素并指定了宽高，行高为34px，颜色为白色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 -30px;}
.woaicss_title_bg3 {background-position:0 -60px;}
.woaicss_title_bg4 {background-position:0 -90px;}
　　此四个样式的定义请与步骤四javascript脚本进行联系。即在函数的值变化时，相应的对无序列表的
样式进行重新定义，我们在此处对背景图定位进行了调整，实现了选项卡片的突出状态。

 
.woaicss_con {
    display:block; 
    width:438px; 
    height:270px; 
    background:url(con_bg.png) no-repeat 0 0; overflow:hidden;
}
　　内容层的样式定义，指定宽高，并设置背景图片con_bg.png。52CSS.com请您特别注意，这里的背景
图片与无序列表UL的背景图片应该是无缝结合。即从外观上它们两者是一个整体。

六、内容充实：

　　我们为内容层填充一定的内容，并对其进行美化，例如：（仅说明其一，其它三个雷同。）

 
    

        
• Web Developer插件教程 CSS网页布局辅助设计利器！详细图文讲解
  ！

        
• CSS Templates 频道4月5日更新 增加模板22套

        
• XHTML与CSS入门经典 从零开始系列教程！

        
• DIV+CSS布局入门示例（目录）

        
• CSS基础教程17篇 [翻译Htmldog]

        
• DIV CSS布局实例：用css网站布局之十步实录！（目录） 
  

        
• WEB2.0标准教程 循序渐进十二天的基础学习！

        
• Div+CSS 网页布局 教程！

    

　　我们充实的内容层为一个UL无序列表，我们对其进行样式定义：

 
.woaicss_con ul {
    width:418px; 
    height:250px; 
    margin:12px auto;
}
.woaicss_con li {
    width:418px; 
    line-height:30px; 
    margin:0 auto; 
    white-space:nowrap; 
    text-overflow:ellipsis; 
    overflow: hidden;
}
.woaicss_con li a {
    color:#03c;
}
.woaicss_con li a:hover {
    color:#069; 
    text-decoration:underline;
}
　　此处不是本文重点，所以不再赘述，相关的知识请参考：>>> 52CSS.com关于列表UL制作的文章 
七：细节修饰

　　我们这里的链接并未起到真正的URL转向的作用，仅是一个标签，所以我们可以将其虚线框去除，以
让我们的页面更加的工整与自然。将下面的代码另存为xuxian.htc文件：

 

<script> <BR>function hscfsy(){ <BR>this.blur(); <BR>} <BR></script>
このコードを CSS スタイルに追加します: {behavior:url(xuxian.htc)}
これにより、リンクの破線フレームが削除されます (この効果は FF では効果がないことに注意してください)。

8: 最終的な効果と推論:

ついにこの効果を達成できます。>>> ここをクリックして
私たちの実装では、次のような問題が発生する可能性があります。仕事上の別の状況:
マウスがその上を移動したときに切り替え、マウスがクリックされたときに対応するコンテンツへのリンクを開く必要があります。
これは、順序なしリスト UL を次のように変更することで実現できます。

• 52CSS.com


• Div CSSチュートリアル


• CSS レイアウトの例


• WEB 標準化

わずかな調整でこの効果を実現しました。