首页 文章

如何在Javascript中突出显示链接

提问于
浏览 次
-1

我的页面上有一个搜索框 . 当它被提交时，它将根据输入到文本框中的id跳转到页面下方的锚ID，而不刷新页面（这是关键） .

这是我目前的代码 .

使用Javascript：

$(function() {
    $('form#unitid_quickfind').submit(function(e) {
        var anchor = $("#unitid_input").val();
        var position = $("#"+anchor).offset();
        window.scrollTo(position.left, position.top);

        return false;
    });
});

HTML：

<form id="unitid_quickfind">
    <input id="unitid_input" type="text" />
    <input type="submit" value="Find" />
</form>

<a id="1">Unit 1</a>
<a id="2">Unit 2</a>
<a id="3">Unit 3</a>

在单击提交时跳转到锚点，我还希望以某种方式突出显示链接 . 实现此目的的最简单方法是什么（最好添加到现有的Javascript函数中）？

TIA

javascript html css

1 回答

  • 0

    您需要选择该元素，而不是只需应用所需的样式 .

    在这里，我通过 var element = document.getElementById(anchor); 选择了元素 .

    并通过使用 element.style.color = 'green' 我更改所选元素的颜色 .

    $(function() {
    $('form#unitid_quickfind').submit(function(e) {
        var anchor = $("#unitid_input").val();
        var position = $("#"+anchor).offset();
        var element  = document.getElementById(anchor);
        if(element)element.style.color = 'green'
        if(position)window.scrollTo(position.left, position.top);

        return false;
    });
});

    <script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>
<form id="unitid_quickfind">
    <input id="unitid_input" type="text" />
    <input type="submit" value="Find" />
</form>

<a id="1">Unit 1</a>
<a id="2">Unit 2</a>
<a id="3">Unit 3</a>
    回复于

相关问题