js選項卡功能2

時間 2019-11-24

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選項卡(利用css中target)</title>
    <style>
         *{
             margin:0;
             padding: 0;
             list-style:none ;
 
             text-decoration: none;
         }
         .tab{
             width: 300px;
             height: 300px;
             border:1px solid black;
         }
         .tab-choose{
             width: 100%;
             box-sizing: border-box;
             height: 40px;
         }
         .tab-choose li{
             width: 30%;
             height: 40px;
             border: 1px solid #e1e1e1;
             float: left;
             text-align: center;
             line-height: 40px;
             font-size: 14px;
             margin-left: 2%;
         }
         .tab-con {
             width: 100%;
             height: 260px;
             text-align: center;
             line-height: 260px;
             font-size: 16px;
         }
        .tab-con ul li{
            width: 100%;
            height: 100%;
 
        }
         .tab-con ul li {
             display: none;
         }
         .tab-con ul li:target {
             display: block;
             color: red;
         }
    </style>
 
</head>
<body>
<div class="tab">
    <ul class="tab-choose">
        <li><a href="#page1">選擇一</a></li>
        <li><a href="#page2">選擇二</a></li>
        <li><a href="#page3">選擇三</a></li>
    </ul>
    <div class="tab-con">
        <ul >
            <li id="page1">內容一</li>
            <li id="page2">內容二</li>
            <li id="page3">內容三</li>
        </ul>
    </div>
</div>
</body>
</html>

1. js選項卡功能3
2. js選項卡功能4
3. js選項卡功能
4. js選項卡
5. JS 選項卡
6. JS——選項卡
7. js tab選項卡 mootools tab選項卡
8. 使用原生js實現選項卡功能實例教程
9. 製做一個選項卡功能
10. angularJS 實現選項卡功能
更多相關文章...
• ionic tab(選項卡) - ionic 教程
• ionic 選項卡欄操作 - ionic 教程
• SpringBoot中properties文件不能自動提示解決方法
• IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。