點擊href鏈接后顯示div

Question

我解決了我的第一個問題，即根據復選框選擇顯示一個或兩個 div（ 僅在選中復選框時才在單擊按鈕后顯示多個 div - 感謝@J4k3z）。

我的代碼是：

$div1 = $(".div1");
$div2 = $(".div2");

$div1.hide()
$div2.hide()

function showDiv(){
    if(document.getElementById('chk1').checked){    
        $div1.show()
    } else {
        $div1.hide()
    }
    if(document.getElementById('chk2').checked){
        $div2.show()
    } else {
        $div2.hide()
    }
}

<input type="checkbox" id="chk1" placeholder="Yes">
<label>Div 1</label>
<input type="checkbox" id="chk2" placeholder="Yes">
<label>Div 2</label>
<br />
<button onClick="showDiv()">Check!</button>
<br />
<div class="div1">Div no 1</div>
<div class="div2">Div no 2</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

此代碼由按鈕運行。 是否可以用 href 鏈接替換按鈕？

Answer 1

是的，為此您需要使用addEventListener()方法。

在您的 HTML 中，您必須創建一個帶有 id 的鏈接

<a id='link-id' href='#'>some link</a>

然后在javascript中，在這個鏈接上添加一個事件監聽器

$('#link-id').addEventListener('click', showDiv)

---

您可以嘗試的另一種方法是使用.onclick()方法（來自此處）

$('#link-id').onclick = showDiv;