目录
1.新浪下拉菜单
2.淘宝服饰精品
1.新浪下拉菜单
- 利用jQuery基础选择器$("选择器")
- 选择对应的方法实现
实现效果
实现代码
<script>
$(function() {
// 鼠标经过
$(".nav>li").mouseover(function() {
// $(this) jQuery 当前元素 this不要加引号
// show() 显示元素 hide() 隐藏元素
$(this).children("ul").show();
});
// 鼠标离开
$(".nav>li").mouseout(function() {
$(this).children("ul").hide();
})
})
</script>
遇到的问题:下拉框不显示
原因:jQuery文件导入不成功
解决:修改路径
2.淘宝服饰精品
- tab栏左右切换,关键是鼠标经过左右的li得到相应的索引呈现对应的照片,并将其他照片隐藏起来。
- $(this).index()可以快速获得索引号
- 相应索引号显示出来$("#content div").eq(index).show();
- 其余照片隐藏$("#content div").eq(index).siblings().hide();
实现效果
实现代码
<script src="jquery.min.js"></script>
<script>
$(function() {
//1.鼠标经过左侧的li
$("#left li").mouseover(function(){
//2.得到当前小li的索引号
var index=$(this).index();
console.log(index);
//3.让我们右侧的盒子相应索引号显示出来
$("#content div").eq(index).show();
//4.让其余的图片(就是其他的兄弟)隐藏起来
$("#content div").eq(index).siblings().hide();
})
})
</script>
遇到的问题依然是jQuery文件不存在,我重新导入,检查路径是否正确,最后发现每次导入文件必须在同一个目录下导入才能成功。