新浪下拉菜单案例淘宝服饰精品案例

目录

1.新浪下拉菜单

2.淘宝服饰精品

---

1.新浪下拉菜单

1. 利用jQuery基础选择器$("选择器")
2. 选择对应的方法实现

实现效果

实现代码

<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文件不存在，我重新导入，检查路径是否正确，最后发现每次导入文件必须在同一个目录下导入才能成功。