Question

我似乎无法弄清楚如何使用mark.js（或其他一些工具），当我在目录中选择按钮时，可以触发动画突出显示。

e.g。想象一下，页面左侧是一个问题列表。当用户选择问题中的这些问题/点击之一时，相应的答案会以某种方式在右侧突出显示。可能是页面的右侧变暗，除了相应的文本或相应文本周围的红框动画，或突出显示......任何想法？

换句话说，突出显示是基于点击或点按而非搜索结果触发的。

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>

mark.js从选择中触发事件

1 个答案: