mark.js觸發事件從選擇

Question

我似乎無法弄清楚如何使用mark.js（或其他工具），當我在內容列表中選擇一個按鈕時，可以觸發動畫高亮顯示。

例如想象一下頁面左側是一列問題。當用戶在問題中選擇其中一個問題/點擊時，相應的答案以某種方式在右側突出顯示。可能是頁面的右側除了相應的文本或者紅框圍繞相應的文本生成黑暗，或突出顯示......任何想法都會變暗？

換句話說，突出顯示是基於點擊或點擊觸發的，而不是搜索結果。

Answer 1

你因爲它更容易不需要mark.js：

$(function() { 
 
    $("[data-question]").on("click", function() { 
 
    var number = $(this).attr("data-question"); 
 
    $("[data-answer]").removeClass("highlight"); 
 
    $("[data-answer='" + number + "']").addClass("highlight"); 
 
    }); 
 
});

.questions, 
 
.answers { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
.highlight { 
 
    background: red; 
 
}

<div class="questions"> 
 
    <ul> 
 
    <li data-question="1">Question 1</li> 
 
    <li data-question="2">Question 2</li> 
 
    <li data-question="3">Question 3</li> 
 
    </ul> 
 
</div> 
 
<div class="answers"> 
 
    <ul> 
 
    <li data-answer="1">Answer 1</li> 
 
    <li data-answer="2">Answer 2</li> 
 
    <li data-answer="3">Answer 3</li> 
 
    </ul> 
 
</div>