突出显示一个特定的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">元素？

谢谢！

来源

2011-11-29 Anonymous

我更新了我的答案。 – Neal

顺便说一下，您不应该在DOM的几个元素上使用相同的ID –

试试这个：

$('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 < 1.7然后执行：

$('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/

来源

2011-11-29 14:24:52 Neal

没有足够的jQueryUI。 ;-) – Blazemonger

@ mblase75你在说什么？问题和答案都不在任何地方使用jQuery UI。 – Bojangles

@JamWaffles'.effect'方法来自哪里？ – Blazemonger

试试这个：

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

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

它使用的链接作为选择的.effect()线的href属性。

来源

2011-11-29 14:25:30 Bojangles

，你需要在这里使用这样的：

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

编辑：固定的错误，就把第二.parent（）调用

来源

2011-11-29 14:25:58 LostMohican

你为什么要突出父母？ – Neal

有什么不对，因为当我按下链接时背景突出显示... – Anonymous

@Neal，因为父母是要突出显示的div – LostMohican

$（文件）。就绪（函数（）{ $（“a＃id_1”）。click（function（）{
$（“div＃id_1”）。effect（“highlight”，{color：“＃FF0000”}，3000）; return false;}） ; $（“a＃id_2”）。click（function（）{
$（“div＃id_2”）。effect（“highlight”，{color：“＃0000FF”}，3000）; return false; }）; }）;

和HTML将有一个 “A” 的标签，其是 [代码]

A HREF = “＃” ID = “ID1”

A HREF = “＃” ID = “id2”

来源

2014-04-28 11:14:02

突出显示一个特定的DIV

回答

相关问题