<div> <div> <a href="javascript:" >最热团购</a> <a href="javascript:" >商城特惠</a> <a href="javascript:" >名品推荐</a> <a href="javascript:" >缤纷活动</a> </div> <ul> <li> <img src="https://www.jb51.net/img/1.jpg" alt=""> <img src="https://www.jb51.net/img/2.jpg" alt=""> <img src="https://www.jb51.net/img/3.jpg" alt=""> <img src="https://www.jb51.net/img/4.jpg" alt=""> <h3> <a href="javascript:" >优惠1</a> <a href="javascript:" >优惠2</a> <a href="javascript:" >优惠3</a> <a href="javascript:" >优惠4</a> </h3> </li> <li > <img src="https://www.jb51.net/img/2.jpg" alt=""> <img src="https://www.jb51.net/img/3.jpg" alt=""> <img src="https://www.jb51.net/img/4.jpg" alt=""> <img src="https://www.jb51.net/img/5.jpg" alt=""> <h3> <a href="javascript:" >优惠1</a> <a href="javascript:" >优惠2</a> <a href="javascript:" >优惠3</a> <a href="javascript:" >优惠4</a> </h3> </li> <li> <img src="https://www.jb51.net/img/3.jpg" alt=""> <img src="https://www.jb51.net/img/4.jpg" alt=""> <img src="https://www.jb51.net/img/5.jpg" alt=""> <img src="https://www.jb51.net/img/6.jpg" alt=""> <h3> <a href="javascript:" >优惠1</a> <a href="javascript:" >优惠2</a> <a href="javascript:" >优惠3</a> <a href="javascript:" >优惠4</a> </h3> </li> <li > <img src="https://www.jb51.net/img/6.jpg" alt=""> <img src="https://www.jb51.net/img/5.jpg" alt=""> <img src="https://www.jb51.net/img/4.jpg" alt=""> <h3> <a href="javascript:" >优惠1</a> <a href="javascript:" >优惠2</a> <a href="javascript:" >优惠3</a> </h3> </li> </ul> </div>
CSS：
@charset "UTF-8"; body{ font-size: 12px; font-family: "宋体"; } .clearfix:after { content: "."; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; } .clearfix{zoom: 1;} *{ padding: 0; margin: 0; } img{ vertical-align: text-top; } ul li{ list-style: none; } a{ text-underline: none; text-decoration: none; color: #fff; font-weight: bold; } .bg{ width: 850px; margin: 0 auto; height: 291px; border: 1px solid #f2f2f2; background: #fff; } .title{ display: flex; flex-direction: column; width: 100px; height: 100%; float: left; } .title>a{ width: 100%; display: flex; flex: auto; justify-content: center; align-items: center; background: #ccc; color: #000; font-size: 16px; border-bottom: 1px solid #fff; text-align: center; } .title>a:last-of-type{ border-bottom:none ; } ul{ float: left; } ul li{ position: relative; display: none; } ul>li>img{ display: none; } ul .active{ display: block; } ul>li>h3{ position: absolute; width: 100%; bottom: 0; left: 0; display: flex; } ul>li>h3>a{ flex: auto; padding: 10px 0; justify-content: center; align-items: center; text-align: center; border-right: 1px solid #fff; background: cornflowerblue; } ul>li>h3>a:last-of-type{ border-right: none; } .title .on{ background: #fff; } li>h3 .hov{ background: brown; }
js：
<script> window.οnlοad=function () { var oLeft=document.getElementsByClassName("title")[0]; var oLefta=oLeft.getElementsByTagName("a"); var oUl=document.getElementsByTagName("ul")[0]; var oLi=oUl.getElementsByTagName("li"); for(var i=0;i<oLefta.length;i++){ oLefta[i].index=i; e(oLi[i]); oLefta[i].οnclick=function () { var That=this; for(var j=0;j<oLefta.length;j++){ oLefta[j].className=''; oLi[j].className=''; } oLefta[That.index].className="on"; oLi[That.index].className="active"; } } function e(Li) { var oLia=Li.getElementsByTagName('a'); var oImg=Li.getElementsByTagName("img"); for(var k=0;k<oLia.length;k++){ oLia[k].index=k; oLia[k].οnclick=function () { for(var z=0;z<oImg.length;z++){ oImg[z].className=''; oLia[z].className=''; } oImg[this.index].className='active'; oLia[this.index].className='hov'; } } } } </script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: