从js实例学习jQuery———实例一点击改变图片

最新推荐文章于 2022-11-18 15:18:55 发布

学号Java

最新推荐文章于 2022-11-18 15:18:55 发布

阅读量353

点赞数 1

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_42147171/article/details/104929960

版权

前端基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

点击改变图片

1.效果
2.代码

1.效果

点击按钮下面的图品随之改变

2.代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
			
            *{
                padding: 0;
                margin: 0;
            }
			
            ul{
                list-style: none;
            }
			
            #tab{
                width: 480px;
                margin: 20px auto;
                border: 1px solid red;
            }
			
            ul{
                width: 100%;
                overflow: hidden;
            }
			
            ul li{
                float: left;
                width: 160px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                background-color: antiquewhite;
            }
			
            ul li a{
                text-decoration: none;
                color:black;
				font-size: larger;
            }
			
            /* p{
                display: none;
                height: 200px;
                text-align: center;
				font-size: x-large;
                line-height: 200px;
                background-color: #f40;
				color: antiquewhite;
				font-weight: bold;
            } */
			img{
			    display: none;
			    height: 480px;
			}
			
			
			li.active{
			    background-color: #f97;
			}
			
			a.active{
				color: antiquewhite;
			}
			
            /* p.active{
                display: block;
            } */
			img.active{
			    display: block;
			}
        </style>
		<script type="text/javascript" src="../jquery-1.11.3.min.js" ></script>
    </head>
	
	
    <body>
		
        <div id="tab">
            <ul>
                <li class="active">
                    <a href="#" class="active" >首页</a>
                </li>
                <li>
                    <a href="#">新闻</a>
                </li>
                <li>
                    <a href="#">图片</a>
                </li>        
            </ul>
           <!-- <p class="active">首页内容</p>
            <p>新闻内容</p>
            <p>图片内容</p> -->
			
			<img src="img/tupian1.png" class="active">
			<img src="img/tupian2.png" >
			<img src="img/tupian3.png" >
			
        </div>
		
    </body>
	
    <script type="text/javascript">
		
		//需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类);
		//思路：1.点亮上面的盒子。   2.利用索引值显示下面的盒子。
		
        // window.onload = function () {
			
            var tabli = $("li");

			var tabContent = $("img");
			var tablia = $("a");

            for (var i = 0; i < tabli.length; i++) {
				
                // 绑定索引值（新增一个自定义属性：index属性）
                //tabli[i].index  = i;
				tabli.eq(i).index(i);
                tabli.eq(i).click(function () {

                    // 1.点亮上面的盒子。   2.利用索引值显示下面的盒子。(排他思想)
                    for (var j = 0; j < tabli.length; j++) {
                      //  tabli[j].className = '';
                        tabli.eq(j).attr("class","");
                      //  tabContent[j].className = '';
                        tabContent.eq(j).attr("class","");
						//tablia[j].className = '';
						tablia.eq(j).attr("class","");
                    }
                    //this.className = 'active';
					$(this).attr("class","active");
					//tablia[this.index].className = 'active';
					tablia.eq($(this).index()).attr("class","active");
                   // tabContent[this.index].className = 'active';//【重要代码】
                    tabContent.eq($(this).index()).attr("class","active");
                })
			}
        // }
    </script>
	
</html>