Ozz*_*zzC 2 html javascript css jquery
我有这个代码,做一个基本的幻灯片放映
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
function Slider()
{
$(".slider#1").show("fade",500);
}
</script>
比我有这个div:
<div class="slider">
<img id="1" src="images/pic1.jpg" border="0" alt="Image"/>
<img id="2" src="images/pic1.jpg" border="0" alt="Image"/>
<img id="3" src="images/pic1.jpg" border="0" alt="Image"/>
</div>
当身体加载时我也有onload in body来做jquery函数:
<body onload="Slider()">
但没有任何反应,错误是什么？
您无法使用数字启动CSS ID,请参阅此处:http://css-tricks.com/ids-cannot-start-with-a-number/
您正在选择子元素.slider,所以您需要.slider #i1,请参阅此处:http://api.jquery.com/descendant-selector/
最好用$(document).ready(function(){});而不是<body onload="Slider()">,请看这里:onload()和$ .ready之间的区别？
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
function Slider()
{
$(".slider #i1").show("fade",500);
}
$(document).ready(function(){
Slider();
});
</script>
<div class="slider">
<img id="i1" src="images/pic1.jpg" border="0" alt="Image"/>
<img id="i2" src="images/pic1.jpg" border="0" alt="Image"/>
<img id="i3" src="images/pic1.jpg" border="0" alt="Image"/>
</div>
尝试 $(".slider #1").show("fade",500);
所以现在.slider和#1之间有一个空格,意思是:在一个带有'slider'类的元素中查找id为'1' 的元素,这就是你想要的.你所拥有的是:寻找一个id为'id' 和类滑块的元素.
修复错误
选择器中存在错误.你需要在类和id之间留一个空格.也像Copy Devil在他的回答中说的,你不能用数字开始一个css id,所以...
$(".slider #i1").show("fade",500);
好的做法
不是在你的身体上添加一个onload标签,而是改为做好这种做法.
$(document).ready(function(){
$(".slider #i1").show("fade",500);
});
这被称为不引人注目的JavaScript.它避免了将HTML和JavaScript混合在一起.