

クリックしてアクティブにしたリンクの背景にだけ、ふわふわと動く背景画像を出現させたいです。  
cssだけでできないかと調べてlabelを試して失敗し、jqueryでクラスを付け替えることを試しましたがうまくいきません。

コードは以下

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>タイトル</title>
        <link rel="stylesheet" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <body>
        <nav>
            <ul class="flex_" id="nav_">
                <li><a href="#">top</a></li>
                <li><a href="#one">関連記事</a></li>
                <li><a href="#two">みなさんのメッセージ</a></li>
            </ul>
        </nav>
        <section id="one">
            <p>ここはoneだよ</p>
        </section>
        <section id="two">
            <p>ここはtwoだよ</p>
        </section>
        <script>
            var linkList = $('#nav li');
    //リストをクリックした時の処理
    linkList.on('click', function () {
        //リンクのclass設定をリセット
        linkList.removeClass('huwahuwa');
        //クリックしたリストにcurrentのclassを追加
        $(this).addClass('huwahuwa');
    });
        </script>
    </body>
    </html>
    
    @charset "utf-8";
    
    html{
        scroll-behavior: smooth;
    }
    body{
        width:960px;
        margin:0 auto;
        font-size: 16px;
        position: relative ;
    }
    
    a {
        -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -o-transition: 0.3s;
          -ms-transition: 0.3s;
          transition: 0.3s;
      }
    
    nav{
        height:90px;
        width:95%;
        margin:0 auto;
        position: fixed;
        top:0;
        left:0;
    }
    
    .flex_{
        max-width: 1200px;
        width:40%;
        margin:0 0 0 60%;
        height:80px;
        line-height:80px;
        display: flex;
        justify-content: space-between;
        text-decoration: none;
        list-style: none;
    }
    
    @media(max-width: 959px){
        body{
            width:100%;
        }
        .flex_{
            width:95%;
            margin:0  auto;
        }
    }
    
    .flex_ a{
        display: block;
        font-size:1.2rem;
        padding:0;
        margin-left:15px;
        color:#000;
        text-decoration: none;
    }
    
    .huwahuwa{
        animation:huwahuwa 3s infinite ease-in-out .8s alternate;
        background:url(icon.png) no-repeat center center / 60px auto;
        display:inline-block;
        transition:1.5s ease-in-out;
        width:100px;
        height:100px;
        margin-left:-100px;
        z-index:-99;
    }
    
    @keyframes huwahuwa {
        0%{
            transform:translate(0,0) rotate(-7deg);
        }
        50%{
            transform:translate(0,-7px) rotate(0deg);
        }
        100%{
            transform:translate(0,0) rotate(7deg);
        }
    }
    
    .huwahuwa2{
        animation:huwahuwa 2.7s infinite ease-in-out .65s alternate;
        background:url(icon.png) no-repeat center center / 60px auto;
        display:inline-block;
        transition:1.5s ease-in-out;
        width:100px;
        height:100px;
        margin-left:-100px;
        z-index:-99;
    }
    
    @keyframes huwahuwa2 {
        0%{
            transform:translate(0,0) rotate(-7deg);
        }
        50%{
            transform:translate(0,-7px) rotate(0deg);
        }
        100%{
            transform:translate(0,0) rotate(7deg);
        }
    }
    
    .flex_ a:hover{
        opacity:0.6;
        transition: .6s;
    }
    
    #one,#two,#three{
        width:100%;
        height:600px;
    }
    #one{
        margin-top:80px;
        background:pink;
        z-index:-100;
    }
    #two{
        background:skyblue;
        z-index:-100;
    }
    #three{
        background:green;
        z-index:-100;
    }
    
[/code]


CC BY-SA 4.0
2021-06-23T05:09:42.713
77727
2021-06-23T07:20:53.200
46994
question
html jquery css
動く背景がクリックすると表示され、別のものをクリックするとそちらに動く背景が移るメニューを作りたい


「ふわふわと動く背景画像」とは一体どういうものか  
出来上がりのイメージがあいまいでよくわかりませんでした。

ただjQueryが動かないのは"nav_"になっているからかなと思います。  
navにすれば正しく動くと思います。

[code]

    var linkList = $('#nav li');
    //リストをクリックした時の処理
    linkList.on('click', function () {
        //リンクのclass設定をリセット
        $("section").removeClass('huwahuwa');
        $(this).addClass('huwahuwa');
    });
[/code]

[code]

    @charset "utf-8";
    
    html{
        scroll-behavior: smooth;
    }
    body{
        width:960px;
        margin:0 auto;
        font-size: 16px;
        position: relative ;
    }
    
    a {
        -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -o-transition: 0.3s;
          -ms-transition: 0.3s;
          transition: 0.3s;
      }
    
    nav{
        height:90px;
        width:95%;
        margin:0 auto;
        position: fixed;
        top:0;
        left:0;
    }
    
    .flex_{
        max-width: 1200px;
        width:40%;
        margin:0 0 0 60%;
        height:80px;
        line-height:80px;
        display: flex;
        justify-content: space-between;
        text-decoration: none;
        list-style: none;
    }
    
    @media(max-width: 959px){
        body{
            width:100%;
        }
        .flex_{
            width:95%;
            margin:0  auto;
        }
    }
    
    .flex_ a{
        display: block;
        font-size:1.2rem;
        padding:0;
        margin-left:15px;
        color:#000;
        text-decoration: none;
    }
    
    .huwahuwa{
        animation:huwahuwa 3s infinite ease-in-out .8s alternate;
        background:url(icon.png) no-repeat center center / 60px auto;
        display:inline-block;
        transition:1.5s ease-in-out;
        width:100px;
        height:100px;
        margin-left:-100px;
        z-index:-99;
    }
    
    @keyframes huwahuwa {
        0%{
            transform:translate(0,0) rotate(-7deg);
        }
        50%{
            transform:translate(0,-7px) rotate(0deg);
        }
        100%{
            transform:translate(0,0) rotate(7deg);
        }
    }
    
    .huwahuwa2{
        animation:huwahuwa 2.7s infinite ease-in-out .65s alternate;
        background:url(icon.png) no-repeat center center / 60px auto;
        display:inline-block;
        transition:1.5s ease-in-out;
        width:100px;
        height:100px;
        margin-left:-100px;
        z-index:-99;
    }
    
    @keyframes huwahuwa2 {
        0%{
            transform:translate(0,0) rotate(-7deg);
        }
        50%{
            transform:translate(0,-7px) rotate(0deg);
        }
        100%{
            transform:translate(0,0) rotate(7deg);
        }
    }
    
    .flex_ a:hover{
        opacity:0.6;
        transition: .6s;
    }
    
    #one,#two,#three{
        width:100%;
        height:600px;
    }
    #one{
        margin-top:80px;
        background:pink;
        z-index:-100;
    }
    #two{
        background:skyblue;
        z-index:-100;
    }
    #three{
        background:green;
        z-index:-100;
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <nav>
            <ul class="flex_" id="nav">
                <li><a href="#">top</a></li>
                <li><a href="#one">関連記事</a></li>
                <li><a href="#two">みなさんのメッセージ</a></li>
            </ul>
        </nav>
        <section id="one">
            <p>ここはoneだよ</p>
        </section>
        <section id="two">
            <p>ここはtwoだよ</p>
        </section>
[/code]


CC BY-SA 4.0
2021-06-23T05:27:05.223
77729
2021-06-23T07:20:53.200
2021-06-23T07:20:53.200
22665
22665
77727
answer