欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用JS編寫選項(xiàng)卡效果

 更新時(shí)間:2021年09月17日 10:04:58   作者:fanfan_h  
這篇文章主要為大家詳細(xì)介紹了用JS編寫選項(xiàng)卡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS編寫選項(xiàng)卡效果的具體代碼,供大家參考,具體內(nèi)容如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .selectka {
            width:500px;
            height:400px;
            margin:auto;
            border:1px solid #09e1ff;
        }
        .left,.right{
            float:left;
            height:400px;
        }
        #menu{
            text-align: center;
            line-height: 80px;
            font-size: 20px;
            color:purple;
        }
        li{
            list-style: none;
        }
        #menu>li{
            width:100px;
            height:80px;
            border:1px dashed blueviolet;
            box-sizing: border-box;
        }
        .right{
            position: relative;
            width:399px;
            background: pink;
            margin-left:1px;
            text-align: center;
            font-size: 100px;
            line-height: 400px;

        }

        .right li{
            position: absolute;
            width:399px;
            height:400px;
            display: none;
        }
    </style>
</head>
<body>
<div class="selectka">
    <div class="left">
        <ul id="menu">
            <li class="menulist">衣服</li>
            <li class="menulist">美妝</li>
            <li class="menulist">包包</li>
            <li class="menulist">美食</li>
            <li class="menulist">首飾</li>
        </ul>
    </div>
    <div class="right">
        <ul>
            <li class="numlist">衣服</li>
            <li class="numlist">美妝</li>
            <li class="numlist">包包</li>
            <li class="numlist">美食</li>
            <li class="numlist">首飾</li>
        </ul>
    </div>
</div>
<script>
    var menu_list=document.getElementsByClassName("menulist");
    var num_list=document.getElementsByClassName("numlist");
    var moo=null;
    var yuu=null;
        for(var i=0;i<menu_list.length;i++) {
            menu_list[i].index = i;
            menu_list[i].onmouseenter = function () {
                /* console.log(this.index);*/   //this.index 為當(dāng)前目標(biāo)的索引值
                /* for(var k=0;k<num_list.length;k++){
                    num_list[k].style.display ="none";
                }
                num_list[this.index].style.display ="block";
            }*/
                if(yuu)yuu.style.background ="none";
                this.style.background ="yellow";
                yuu=this;
                 if(moo)moo.style.display="none";
                num_list[this.index].style.display = "block";
                moo = num_list[this.index];
        }
}
</script>
</body>
</html>

效果圖:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • js中onclick和addEventListener的區(qū)別

    js中onclick和addEventListener的區(qū)別

    本文對(duì)javascript中onclick事件處理的方法和addEventListener監(jiān)聽器進(jìn)行講解,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-08-08
  • 用javascript做一個(gè)小游戲平臺(tái) (二) 游戲選擇器

    用javascript做一個(gè)小游戲平臺(tái) (二) 游戲選擇器

    昨天晚上“設(shè)計(jì)”了n久,那些代碼都還沒有運(yùn)行起來,有點(diǎn)心急、有點(diǎn)郁悶。
    2010-01-01
  • 詳解JavaScript中精度失準(zhǔn)問題及解決方法

    詳解JavaScript中精度失準(zhǔn)問題及解決方法

    這篇文章主要介紹了JavaScript中精度失準(zhǔn)問題及解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • JavaScript必看小技巧(必看)

    JavaScript必看小技巧(必看)

    下面小編就為大家?guī)硪黄狫avaScript必看小技巧(必看)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-06-06
  • js+canvas繪制五角星的方法

    js+canvas繪制五角星的方法

    這篇文章主要介紹了js+canvas繪制五角星的方法,涉及JavaScript調(diào)用canvas組件結(jié)合數(shù)學(xué)運(yùn)算繪制圖形的相關(guān)技巧,需要的朋友可以參考下
    2016-01-01
  • Vue formData實(shí)現(xiàn)圖片上傳

    Vue formData實(shí)現(xiàn)圖片上傳

    這篇文章主要為大家詳細(xì)介紹了Vue formData實(shí)現(xiàn)圖片上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-08-08
  • 使用Github?Actions發(fā)布npm包完整過程詳解

    使用Github?Actions發(fā)布npm包完整過程詳解

    本文包含本地發(fā)布npm包發(fā)布流程,?和?github?action自動(dòng)發(fā)布npm包流程,幫助你更好的發(fā)布自己或公司的npm包,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09
  • javascript 像素拼圖實(shí)現(xiàn)代碼

    javascript 像素拼圖實(shí)現(xiàn)代碼

    非常不錯(cuò)的像素拼圖效果
    2009-04-04
  • js前端處理跨域的九種方式

    js前端處理跨域的九種方式

    本文主要介紹了js前端處理跨域的九種方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2024-07-07
  • js實(shí)現(xiàn)搜索提示框效果

    js實(shí)現(xiàn)搜索提示框效果

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)搜索提示框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-09-09

最新評(píng)論