zoukankan      html  css  js  c++  java
  • jQ选项卡案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            a{
                text-decoration: none;
                color: white;
            }
            #box{
                 400px;
                height: 300px;
            }
            #box ul{
                 100%;
                overflow: hidden;
            }
            #box ul li{
                float: left;
                 50px;
                height: 50px;
                margin: 0 10px;
                background-color: red;
                text-align: center;
                line-height: 50px;
            }
    
            .active{
                 70%;
                height: 100px;
                background-color: blue;
                display: none;
            }
    
        </style>
    </head>
    <body>
        <div id="box">
            <ul>
                <li>
                    <a href="javascript:void(0)">张三</a>
                </li>
                <li>
                    <a href="javascript:void(0)">李四</a>
                </li>
                <li>
                    <a href="javascript:void(0)">王五</a>
                </li>
                <li>
                    <a href="javascript:void(0)">GAI六</a>
                </li>
            </ul>
            <div class="active"></div>
        </div>
        <script src="jquery-3.3.1.js"></script>
        <script>
            $(function () {
                $('#box ul li a').click(function () {
    
                    $(this).css('color', 'yellow').parent('li').siblings('li').find('a').css('color', '#fff');
                    var textVal = $(this).text();
                    var changeVal = `<h1>${textval}</h1>`;
                    $('.active').show().html(changeval);
                    // val() 对标签里边的值获取
                })
            })
        </script>
    </body>
    </html>
    

      

  • 相关阅读:
    BIEE建模参考规范
    informatica 学习日记整理
    Web Service 的工作原理
    Oracle 时间差计算
    oracle基础知识
    Oracle 外连接和 (+)号的用法
    根据appId匹配项目名称
    vue技术分享-你可能不知道的7个秘密
    echarts3 迁徙图 迁入迁出
    ES6学习笔记
  • 原文地址:https://www.cnblogs.com/Alexephor/p/11348305.html
Copyright © 2011-2022 走看看