Promo Member Baru 40%! Program Full Stack Membership! Hanya 3 Hari! Klaim Promo

mau tanya kalau buttonnya kita ganti <a href="" id="idnya"> gmn ya?

Ditanyakan pada tanggal 14 January 2020 oleh I Wayan Ryan Saputra

Mau tanya kalau misalnya buttonya kita ganti a href gmn ya? dan kalau fungsi li nya kita ganti div eksekusinya kyk gmn? Thanks.

<title>Mau Tanya</title>
</head>
<style>
    .header {
        width: 100%;
        height: 60px;
        background-color: rgb(245, 245, 46);
        display: inline-block;
    }

    ul li {
        display: inline-block;
        text-decoration: none;
    }
</style>

<body>
    <div class="header">
        <ul>
            <li class="aksi1"><a href="" id="aksi">Aksi</a></li>
            <!-- <li class="aksi1"><button id="aksi">Aksi</button></li> -->
            <li class="aksi2">Aksi 2</li>
            <li class="aksi3">Aksi 3</li>
        </ul>
    </div>
BUAT KOMENTAR

2 JAWABAN / 1 KOMENTAR

User avatar
Ahmad Oriza menjawab pada tanggal 15 January 2020

Hai kak,

Prinsip selectornya sama saja, baik button ataupun anchor (href). Tinggal taruh sebuah class / id sebagai selector di Jquery saja kak. Lalu kita bisa sisipkan perintah perintah untuk memanipulasi komponen tampilan pada browser. Contoh kodenya seperti ini, saya agak modifikasi sedikit agar bisa dipahami ya :

<html>
<style>
    .header {
        width: 100%;
        display: inline-block;
    }

    ul li {
        display: inline-block;
        text-decoration: none;
    }
</style>

<body>
    <div class="header">
        <div class="aksi1" style="margin-bottom:20px;background:black;padding:10px;">
            <a href="#" id="aksi1">Aksi</a></li>
        </div>

        <div class="aksi2" style="margin-bottom:20px;background:red;padding:10px;">
            <a href="#" id="aksi2">Aksi</a></li>
        </div>

        <div class="aksi3" style="margin-bottom:20px;background:yellow;padding:10px;">
            <a href="#" id="aksi3">Aksi</a></li>
        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
    $(document).ready(function(){
        $('#aksi1').click(function(){
            $('.aksi1').hide();
        });

        $('#aksi2').click(function(){
            $('.aksi2').hide();
        });

        $('#aksi3').click(function(){
            $('.aksi3').hide();
        });
    });
    </script>
</body>

</html>

Dicoba saja.

BUAT KOMENTAR
User avatar
I Wayan Ryan Saputra menjawab 5 hari yang lalu

Tau penyebabnya ini kenapa gak bisa ya Kak?

<style>
    .header {
        width: 100%;
        height: 60px;
        background-color: rgb(245, 245, 46);
        display: inline-block;
    }

    ul li {
        display: inline-block;
        text-decoration: none;
    }
</style>
<body>
    <div class="header">
        <ul>
            <li class="aksi1"><a href="" id="aksi">Aksi</a></li>
            <!-- <li class="aksi1"><button id="aksi">Aksi</button></li> -->
            <li class="aksi2">Aksi 2</li>
            <li class="aksi3">Aksi 3</li>
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#aksi').on('click', function () {
                $('.aksi2, .aksi3').animate({
                    marginLeft: 150
                });
            });
        });
    </script>
</body>

Thank You.

Comment ..

Gak jalan dari segi apanya kah? saya coba animasinya udh muncul ini

Dikomentari 1 hari yang lalu oleh Ahmad Oriza
BUAT KOMENTAR