如何重定向页面并在新打开的页面上突出显示某些文本


How to redirect page and highlight some text on the new open page

我有一个常见问题页面,当用户单击常见问题锚点时,我希望页面重定向到常见问题并突出显示一个单词,然后滚动并将屏幕聚焦在突出显示的单词上。

请不要使用插件。

好吧,我明白了。试试

<div class="faque_question_table">
  <ul>
        <li  id="q1"><a class="qli" href="answerswer.html?#ans1">Create new course</a></li>
        <li  id="q2"><a class="qli" href="answerswer.html?#ans2">Set privacy and assign users</a>/li>
         <li  id="q3"><a class="qli" href="answerswer.html?#ans3">View course.</a></li>
         <li  id="q4"><a class="qli" href="answerswer.html?#ans4">Edit and delete course.</a></li>
         <li  id="q5"><a class="qli" href="answerswer.html?#ans5">Add thumbnail representation.</a></li>
    </ul>
 </div>
<!-- After some code your answer.html-->
<div class="help_sub_content" id='ans1'>  Your answer 1</div>
 <div class="help_sub_content" id='ans2'>  Your answer 1</div>
<div class="help_sub_content" id='ans3'>  Your answer 1</div>
<div class="help_sub_content" id='ans4'>  Your answer 1</div>

然后脚本

<script>
    $(document).ready(function()
    {
          $(".qli").click(function(){
    $('html, body').animate({'scrollTop' : $($(this).attr('href')).offset().top},1000) //Will maybe be $(window) instead of html,body.
    return false;
            });
});
</script>

你可以很容易地完成这项任务。只要试试下面的脚本,它非常有用。我做了一个符合你目的的fiddle。由于单击链接后需要转到该单词,因此在# symbol或其他内容之后传递带有url的identifier word,并使用javascript split 获取该单词

代码

$('.disclosure').highlight('Test');
 $('html, body').animate({
         scrollTop: $(".highlight").offset().top
     }, 1500);

包括此脚本

http://johannburkard.de/resources/Johann/jquery.highlight-4.js

Fiddle

http://jsfiddle.net/HehgB/

没有任何外部插件

var src_str = $(".disclosure").html();
var term = "massa";
term = term.replace(/('s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("("+term+")", "i");
src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<'/mark>)/,"$1</mark>$2<mark>$4");
$(".disclosure").html(src_str);
 $('html, body').animate({
         scrollTop: $("mark").offset().top
     }, 1500);

Fiddle

http://jsfiddle.net/4tZ55/

id="some-id"放在单词的容器上,然后将ID放在URL:上

http://example.com/faq#some-id

如果你想进行一些有趣的滚动,并在单词中淡出,那么你可以使用类似jQuery的东西。有相当多的插件可以进行花式滚动。衰落可以在不使用插件的情况下完成。