主要包括几个步骤如下,均是在“卡片”选项的配置:
- 声明脚本,一般不需要修改;
- 先载入句子字段。注意设置好id,便于被脚本调用;
- 后调用脚本;
**基于我的样式表,效果图如下:
涉及Html、CSS和javascript的基本知识,可以在W3Schools或MDN学习:
代码如下,请尽量看懂再根据自己实际修改:
/*-------声明脚本--------*/
<script>
function highlight(text)
{
inputText = document.getElementById("inputText")
var innerHTML = inputText.innerHTML
var index = innerHTML.indexOf(text);
if ( index >= 0 )
{
innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML
}
}
</script>
/*高亮的样式,自定义,放在样式表里面*/
<style>
.highlight{
background-color:yellow;/*演示*/
}
</style>
/*这是要高亮的文本,注意设置了id为"inputText",作为脚本的参量*/
<div id="inputText">
The fox went over the fence./*演示*/
/*{{句子}}*/
</div>
/*开始调用脚本,注意顺序,先载入需要高亮的文本,
后调用highlight脚本,把fox改为{{字段}},
比如我有一个字段为“单词”,就是highlight('{{单词}}')*/
<script>
highlight('fox');/*演示*/
/*highlight('{{单词}}');*/
</script>