本节:
1.点击小图标,更换大图的图片
2.点击导航栏,隐藏的内容会出现。
1.点击小图标,更换大图的图片
1.div
1.在head开头引入jQuery链接
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- 引入jQuery -->2.在页面执行内容
<div style="position: relative;width: 1000px;height: 600px;">
<!-- 父相对 -->
//一开始大大图标
<img id="img" src="./7.jpg" style="width: 100%;height: 100%;" />
//隐藏了的小图标btn
<div class="btngroups">
<div imgurl="./7.jpg" class="btn">1</div>
<!-- imgurl只是一个变量 -->
<div imgurl="./9.jpg" class="btn">2</div>
<div imgurl="./12.jpg" class="btn">3</div>
<div imgurl="./8.jpg" class="btn">4</div>
</div></div>
2.script
3.点击小图标自动换图片的点击函数
<script>
$(function () {
$(".btn").mouseenter(function () {
let abc = $(this).attr("imgurl")
//改变大图标的路径
$("#img").attr("src", abc)//attr改变里面的内容,第一个改变的属性,第二个改变的内容
})
})
</script>方法2:上面的就多了个赋值
<script>
$(function () {
$(".btn").click(function () {
// this相当于指针,会根据鼠标自动跳
$("#img").attr("src", $(this).attr("imgurl") );
// attr})
})
</script>
2.点击导航栏,隐藏的内容会出现。
1.页面内容
<div class="outter" style="position: relative;display: flex;">
<div class="nav">小米手机</div>
<div class="nav">Redmi 红米</div>
<div class="nav">电视</div>
<div class="items">
<!-- items是出现的内容 -->
</div>
</div>
2.script点击事件
<script>
$(function () {
$(".nav").mouseenter(function(){
// 鼠标滑动导航触发
$(".items").css("display","block")
})
$(".outter").mouseleave(function(){
// 鼠标离开范围才触发:display,不显示
$(".items").css("display","none")
})
})
</script>
例子2:点击之后,隐藏的内容会出现
1.页面内容
<div class="pro">
<div>Section 3</div>
<div class="pro1">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat</div>
</div>
</div>
2.script内容
<script>
$(function () {
$(".pro").click(function () {
// this相当于指针,会根据鼠标自动跳
$(".pro1", this).css("display", "block")
})$(".pro").mouseleave(function () {
$(".pro1", this).css("display", "none")})
})
</script>