//css代码
*{ margin: 0; padding: 0; } #box{ margin: 0 auto; width: 800px; border: 5px solid #000000; overflow: hidden; } ul,ol{ list-style: none; } ul{ height: 100px; display: flex; justify-content: space-around; background: greenyellow; align-items: center; } ul li{ width: 200px; font-size: 30px; text-align: center; line-height: 100px; } ul .active{ background: red; } ol{ height: 400px; } img{ width: 800px; height: 400px; background-size: cover; } ol li{ display: none; } ol .active{ display: block; }
//html代码
<div id="box"> <ul> <li class="active">1</li> <li>2</li> <li>3</li> </ul> <ol> <li class="active"><img src="http://img.soogif.com/CRbCMVjc20u2576i2FISvoUQSgrgWk0h.gif" alt="" ></li> <li><img src="http://img.soogif.com/lIJibUY8hZ7leC56X9JpopINB4AM0MdJ.gif_s400x0" alt="" ></li> <li><img src="./images/1.jpg" alt="" ></li> </ol> </div>
记得先引入jquery文件 ,,下面是通过jquery写的js代码
<script src="./js/jquery-3.4.1.js"></script> <script type="text/javascript"> $('ul li').click(function(){ $(this) .addClass('active') .siblings() .removeClass('active') .parent() .next() .children() .removeClass('active') .eq($(this).index()) //取当前下标 .addClass('active'); }) // var box=document.querySelector('#box'); // var ulis=document.querySelectorAll('ul li') // var olis=document.querySelectorAll('ol li') // for(var i=0;i<ulis.length;i++){ // // console.log(ulis[i]); // ulis[i].index=i; // ulis[i].onclick=function(){ // for(var j=0; j<ulis.length;j++){ // ulis[j].className=''; // olis[j].className=''; // } // this.className='active'; // olis[this.index].className='active'; // } // }