Promo Lebaran, Kelas Online CODEPOLITAN Cukup Bayar Setengah Harga 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 Edit  Hapus  Tandai Selesai  Tandai 

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 Jadikan Jawaban Terbaik  Edit  Hapus  Ubah ke Komentar 

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 pada tanggal 17 January 2020 Jadikan Jawaban Terbaik  Edit  Hapus  Ubah ke Komentar 

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.

BUAT KOMENTAR