0

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

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

4

2 回答 2

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')返回一个空的元素数组。

于 2012-12-03T19:28:19.067 回答
1

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

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

});
于 2012-12-03T19:28:30.053 回答