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

时间:2012-12-03 19:25:37

标签: javascript jquery html onclick

我的页面上有几个div。请参见示例http://jsfiddle.net/AYRh6/26/ 当我试图将此代码传输到我的asp.net mvc3项目时,它看起来像:

<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>

工作正常!当这个脚本位于标题时,我做错了什么?

2 个答案:

答案 0 :(得分:4)

Javascript代码会立即执行,但您想要附加处理程序的元素尚未放入DOM中。您可以在jQuery中使用.ready或将脚本放在文档的底部:

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

如果您使用调试器并在代码中设置$('.tab').click处的断点,您会注意到$('.tab')返回一个空元素数组。

答案 1 :(得分:1)

如果查看链接,您会看到选择在DOM准备好的DOM上执行脚本的选项。你必须在你的网站上做同样的事。

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

});