突出显示特定的 DIV答案

【问题标题】：Highlight a specific DIV突出显示特定的 DIV
【发布时间】：2025-12-26 10:45:16
【问题描述】：

我正在尝试“突出显示”特定的 div。

这是我的html代码

<!DOCTYPE html>
<html>
    <head>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <style type="text/css">div { margin: 0px; width: 300px; height: 80px; background: #FFF; border: 1px solid black; position: relative; }</style>
        <script>
            $(document).ready(function() {
                $("a").click(function () {
                    $("div").effect("highlight", {color:"#FF0000"}, 3000);
                });
            });
        </script>
    </head>
    <body>
        <a href="#id_1"><b>id_1</b></a>
        <br/>
        <a href="#id_2"><b>id_2</b></a>

        <br/><br/><br/><br/>
        <div id="id_1"><h2>id_1 - <a class="altlink" href="#top" name="id_1" id="id_1">Top</a></h2></div>
        <div id="id_2"><h2>id_2 - <a class="altlink" href="#top" name="id_2" id="id_2">Top</a></h2></div>
    </body>
</html>

当我单击带有href #id_1 的a 元素时，如何使其突出显示<div id="id_1"> 元素？

谢谢！

【问题讨论】：

顺便说一下，你不应该在 DOM 的多个元素上使用相同的 id

标签： jquery html highlight

【解决方案1】：

试试这个：

$('a[href^="#id"]').on('click', function() {
    var sHref = this.href.split('/');
    $(sHref[sHref.length - 1]).effect("highlight", {
        color: "#FF0000"
    }, 3000);
});

小提琴：http://jsfiddle.net/maniator/4PgC6/

旁注：如果使用 jQuery

$('a[href^="#id"]').click(function() {
    var sHref = this.href.split('/');
    $(sHref[sHref.length - 1]).effect("highlight", {
        color: "#FF0000"
    }, 3000);
});

小提琴：http://jsfiddle.net/maniator/4PgC6/9/

【讨论】：

@mblase75 你在说什么？这个问题和这个答案都没有在任何地方使用 jQuery UI。
@JamWaffles '.effect' 方法不就是从这里来的吗？
只有在你知道你将使用 jQuery 1.7+ 时才使用它，否则使用 $('a[href=^"#id"]').click(function(){....
@mblase75 我很抱歉；我没看到。我什至在自己的回答中使用了.effect()！
@JamWaffles 确实如此。它使用effect。我更改了答案以反映它。

【解决方案2】：

试试这个：

$('a').click(function() {
    var selector = $(this).attr('href');

    // Highlight div with whatever CSS you like
    $(selector).effect("highlight", {color:"#FF0000"}, 3000);
}

这使用链接的href 属性作为.effect() 行的选择器。

【讨论】：

【解决方案3】：

你需要在这里这样使用：

$(document).ready(function() {
    $("a").click(function () {
                    $(this).parent().parent().effect("highlight", {color:"#FF0000"}, 3000);
                });
            });

编辑：修复错误，调用第二个 .parent()

【讨论】：

为什么要突出父母？
@Neal 因为 parent 是要突出显示的 div

【解决方案4】：

$(document).ready(function() { $("a#id_1").click(function () {
$("div#id_1").effect("highlight", {color:"#FF0000"}, 3000);返回错误的; }); $("a#id_2").click(function () {
$("div#id_2").effect("highlight", {color:"#0000FF"}, 3000);返回错误的; }); });

并且 HTML 会有一个“A”标签，它是 [代码]

a href="#" id="id1"

a href="#" id="id2"

【讨论】：