我的页面上有几个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>
工作正常!当这个脚本位于标题时,我做错了什么?
答案 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');
});
});