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>