css 實現Tab切換

阿新 • • 發佈：2019-01-22

不廢話直接上程式碼

<!DOCTYPE HTML><!--宣告HTML檔案-->
<html><!--根標籤，網頁的開始-->
    <head><!--給瀏覽器看的資訊-->
        <title>please enter your title</title>
        <meta charset="utf-8"><!--編碼格式為國際編碼UTF-8-->
        <meta name="description" content=""> 
<!--對網頁的描述，給搜尋引擎抓取-->
        <meta name="keywords" content=""><!--為搜尋引擎提供關鍵字列表-->
        <style type='text/css'>
            *{ margin:0; padding:0;font-family:'Microsoft yahei';}
            .test_box {
                width: 50%;
                min-height: 250px;
                margin 
: 1em auto;
                position: relative;
            }
            .test_tab {
                width: 25%;
                margin-right: -1px;
                border: 1px solid #ccc;
                border-bottom: 0;
                float: left;
            }
            .test_label {
                display 
: block;
                padding-top: 5px;
                padding-bottom: 5px;
                background-color: #eee;
                text-align: center;
            }
            .test_radio,
            .test_tab_content {
                position: absolute;
                left: -999em;
            }
            .test_radio:checked ~ .test_tab_content {
                margin-top: -1px;
                padding: 1em 2em;
                border: 1px solid #ccc;
                left: 0;
                right: 0;
            }
            .test_radio:checked ~ .test_label {
                background-color: #fff;
                border-bottom: 1px solid #fff;
                position: relative;
                z-index: 1;
            }
        </style>
    </head>
    <body><!--視覺化區域-->

        <div class="test_box">
            <div class="test_tab">
                <input type="radio" id="testTabRadio1" class="test_radio" name="tab" checked="checked" />
                <label class="test_label" for="testTabRadio1">選項卡1</label>
                <div class="test_tab_content">
                    <p>我是選項卡1對應的美女</p>
                    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
                </div>
            </div>
            <div class="test_tab"> 
                <input type="radio" id="testTabRadio2" class="test_radio" name="tab" />
                <label class="test_label" for="testTabRadio2">選項卡2</label>
                <div class="test_tab_content">
                    <p>我是選項卡2對應的美女</p>
                    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
                </div>
            </div>
            <div class="test_tab">
                <input type="radio" id="testTabRadio3" class="test_radio" name="tab" />
                <label class="test_label" for="testTabRadio3">選項卡3</label>
                <div class="test_tab_content">
                    <p>我是選項卡3對應的美女</p>
                    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" />
                </div>
            </div>
        </div>
    </body>
</html><!--網頁的結束-->

純CSS實現tab切換

用單選框的:checked偽類和相鄰選擇器實現程式碼如下： <!DOCTYPE html> <html> <head> <title></ti

css 實現Tab切換

不廢話直接上程式碼 <!DOCTYPE HTML> <html> <head>

原生JS實現tab切換--web前端開發

soft 楊冪 microsoft hidden isp 老婆 tex oct rip tab切換非常常見，應用非常廣泛，比較實用，一般來說是一個網站必不可少的一個效果。例如：https://123.sogou.com/中的一個tab部分： 1、案例源代碼 <!DO

怎麽用JavaScript實現tab切換

代碼 www. 股神 .class 最終 ccf article cti ext 先看一下代碼實現後的最終效果：用JavaScript實現思路很簡單，就是先把所有的內容隱藏，點擊標題對應的內容顯示， css代碼如下： <style type="text/css"

element,點選檢視，實現tab切換：

點選檢視，實現tab切換：程式碼如下： <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-colum

js實現tab切換功能

一、初始化html結構 <div class="tab" id="tab"> <span class="active">工作日</span> <span>休息日</span> </div> <d

Unity3D實現Tab切換，頁面切換功能

第一篇部落格，僅作為個人在學習過程中記錄作用正文之前公司遇到幾個兩個專案都有一個列表切換的功能，具體功能就是點選tab列表，內容根據tab切換來變換，效果如下：這樣一個很常見功能網上例子較少，後來學到一個方法，幾步就可以實現，不需要寫程式碼第一步建

小程式如何實現tab切換，一部到位

筆者之前嘗試著其他教程：使用swiper來做切換。但是小程式中swiper存在很多限制，比如高度的限制，所以放棄了這種方案，本文將提供另一個方案。小程式實現tab切換很簡單，只需要完成兩部分。 1

史上最牛逼的純CSS實現tab選項卡，閃瞎你的狗眼

html檔案<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS3外觀漂亮淡入淡出Tab選單演示<

HTML使用Radio Input來實現Tab切換

在開發中看見僅使用css技巧，就用HTML的Radio Input來實現的Tab的切換，連click事件都未使用。程式碼效果如下： <!DOCTYPE HTML> <html> <header> <link rel="stylesheet" href="

轉：JQuery實現tab切換

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab-JQ</title> <style>

android實現TAB切換附原始碼

電腦上的檔案太多了，能用的不能用的有點亂，備份上傳一下，方便自己以後查詢，其實這裡邊有些東西值得自己深入瞭解一下，工作忙也沒時間寫筆記了，哎，走的太快了原始碼編譯執行效果如下：工程是Android Studio的，版本是2.

vue元件實現Tab切換功能

方法一： http://www.jianshu.com/p/5757e2198304 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <ti

android實現tab切換效果

一：利用ViewPager實現Tab切換效果 1.首先新建幾個要切換的xml佈局檔案，然後在主佈局中間新增<android.support.v4.view.ViewPager>佈局，用於顯示我們寫好的xml佈局。 2.在主方法中，定新增程式碼如下：LayoutI

純css3實現tab切換問題

Android典型介面設計(4)——使用ActionBar+Fragment實現tab切換

public class TBActivity extends Activity { private ActionBar actionBar; protected void onCreate(Bundle savedInstanceState) { super.onC

HTML5--javascript程式碼實現Tab切換

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>javascrip

jquery實現tab切換完整程式碼

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="

vue實現tab切換外加樣式切換

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <st

微信小程式實現tab切換

程式碼如下： wxml <view class="tab"> <text class="image-text {{select1?'yes':'no'}}" bindtap="s

css 實現Tab切換

相關推薦