如何在div的onclick事件中使用jquery？

我在我的頁面上有幾個div。見例如http://jsfiddle.net/AYRh6/26/ 當我試圖將此代碼轉移到我的asp.net MVC3項目，它看起來像：如何在div的onclick事件中使用jquery？

<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title</title> 
    <link href="@Url.Content("/Content/Site.css")" rel="stylesheet" type="text/css" /> 
    <script src="@Url.Content("/Scripts/jquery-1.8.3.js")" type="text/javascript"></script> 
    <script src="@Url.Content("/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $('.tab').click(function() { 
     $(this).addClass('active').siblings().removeClass('active'); 
     }); 
    </script> 
</head> 
<body> 
<div class="main"> 
     <div class="tab" style="float:right;">Tab 3</div> 
     <div class="tab" style="float:right;">Tab 2</div> 
     <div class="tab active" style="float:right;">Tab 1</div> 
    </div> 
</body> 
</html>

CSS：

.main{ 
    width:325px; 
} 
div.tab { 
    background: white; 
    width: 100px; 
    border: 1px solid grey; 
    padding-left:5px; 
} 
div.tab.active { 
    background: blue; 
} 
div.tab:hover { 
    background: aqua; 
}

正如你所看到的javascript位於頭的html頁面。它不適合我。我試圖設置此腳本onclick事件，如：

<div class="tab" style="float:right;" onclick="$(this).addClass('active').siblings().removeClass('active');">Tab 3</div> 
      <div class="tab" style="float:right;" onclick="$(this).addClass('active').siblings().removeClass('active');">Tab 2</div> 
      <div class="tab active" style="float:right;" onclick="$(this).addClass('active').siblings().removeClass('active');">Tab 1</div>

它的做工精細！當這個腳本位於標題時，我做錯了什麼？

來源

2012-12-03 mbigun

$（document）.ready（function（）{PUT YOUR CODE HERE}）;或者更好地將它設置在身體關閉標記之前 –

他說/ \ – tgormtx

謝謝！現在它完美了！ – mbigun

JavaScript代碼立即執行，但您要附加處理程序的元素尚未放入DOM中。你可以在jQuery的使用.ready或把你的腳本在文檔的底部：

<script type="text/javascript"> 
    $(document).ready(function(){ 
      $('.tab').click(function() { 
      $(this).addClass('active').siblings().removeClass('active'); 
     } 
    }); 
</script>

如果您使用調試器，並在代碼$('.tab').click設置一個斷點，你會發現，$('.tab')返回元素的空數組。

來源

2012-12-03 19:28:19

如果你看看你的鏈接，你會看到你選擇了在DOM準備好的時候執行腳本的選項。你必須在你的網站上做同樣的事情。

jQuery(document).ready(function() { 
    $('.tab').click(function() { 
     $(this).addClass('active').siblings().removeClass('active'); 
    }); 

});

來源

2012-12-03 19:28:30

如何在div的onclick事件中使用jquery？

回答

相關問題