Created a script to highlight linked text in another HTML page.
<p>Click <span class="f1"><a href="#myModal" data-reveal-id="myModal">here</a>/span></p>
<div class="leftspread">
<p class="table-caption"><span>CHAPTER 4: Vocabulary Checklist</span></p>
<div id="myModal" class="reveal-modal" ><span style="float:right;"><a class="close-reveal-modal" style="font-size:1.5em;">×</a></span>
<div class="voca-head tspace"><strong>CHAPTER 4: Vocabulary Checklist</strong></div>
<div class="voca"> </div>
<div class="voca"><a href="page012.xhtml#pg012">business process re-engineering (n)</a></div>
<div class="voca"><a href="page012.xhtml#pg012">business process</a></div>
<div class="voca"><a href="page016.xhtml#pg016">business-to-employee (B2E) (n)</a></div>
<div class="voca"><a href="page033.xhtml#pg033">corporate social responsibility (n)</a></div>
<div class="voca"><a href="page022.xhtml#pg022">discretion (n), discreet (adj), discretionary (adj)</a></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(document).scrollTop(0);
});
radioBtn();
</script>
The list of keywords (coded above in leftspread) will display as a popup when the text here is clicked.
https://i.sstatic.net/6lKAx.jpg
In the page012.xhtml:
CSS:
.highlight{
background:yellow;
}HTML:
<p><span class="glossary">business process re-engineering</span></span></p><p><span class="glossary">business process</span></span></p>Script:
<script>
$(document).ready(function(){
//alert( window.location.href.split("#")[1] );
var currentURLString = window.location.href.split("#")[1];
//currentURLString = currentURLString
//alert(currentURLString)
if(currentURLString != undefined){
$(".glossary").addClass('highlight');
}
//alert(currentURLString);
});
</script>
It works correctly, but all the text highlighted in yellow wherever <span class="glossary"> is defined, not just the clicked word.
https://i.sstatic.net/M5unG.png
However, I need to only highlight the specific word that is clicked from an anchor tag and ignore any surrounding coded words without classes.
<span class="glossary">business pro</span><span class="ls30 lm42 glossary">cess reeng</span></span>This means only the clicked word should be highlighted, not any other adjacent text coded without classes.
<span class="ls1 lm41">ation of <span class="f1 s2">business pro</span><span class="ls30 lm42">cess reeng</span></span><span class="ls31 lm43">ineering </span></span>If anyone could please fix and resolve this issue, it would be greatly appreciated.