mark.js選択イベントからのトリガー

Question

目次でボタンが選択されたときに、アニメーションの強調表示をトリガーするmark.js（またはその他のツール）を使用する方法を理解できないようです。

ページの左側に質問のリストがあると想像してください。ユーザが質問に対するこれらの質問/クリックの1つを選択すると、対応する回答が何らかの形で右側で強調表示されます。ページの右側が対応するテキストを除いて暗くなったり、赤い枠が対応するテキストの周りにアニメーション化されたり、強調表示されたりする可能性があります。

つまり、強調表示は、検索結果ではなく、クリックまたはタップに基づいてトリガーされます。

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>