突出顯示一個特定的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

回答

相關問題