Question

我的页面上有几个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>

工作正常！当这个脚本位于标题时，我做错了什么？

Answer 1

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

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

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

Answer 2

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

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

});

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

2 个答案: