手机端带图片的选项卡

最新推荐文章于 2019-11-17 15:45:56 发布

DrowningFisher

最新推荐文章于 2019-11-17 15:45:56 发布

阅读量384

点赞数

文章标签：手机选项卡 jq选项卡

本文链接：https://blog.csdn.net/qq_28119041/article/details/79891799

版权

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>选项卡</title>
  </head>
  <script type="text/javascript" src="js/jquery.js"></script>
  <style media="screen">
    *{margin: 0px; padding: 0px; text-decoration: none; list-style: none;}
    body{max-width: 640px; min-width: 320px; width: 100%; height: 100%; margin: 0px auto;}
    .tab-list{width: 100%; height: 240px; border-bottom: 1px solid #aacf53;}
    .ul-tab{height: 50px; width: 100%; border-bottom:1px solid #aacf53;}
    .ul-tab li{float: left; height: 50px; width: 25%; text-align: center; font-size: 14px;}
    .ul-tab li img {width: 20px; margin-top: 10px}
    .bkg{background: #aacf53; color: #fff}
    .ul-content li{display: none;}
    .ul-content li:first-child{display: block}
  </style>
  <body>
    <div class="tab-list">
      <ul class='ul-tab'>
        <li class='aaa bkg'><img class='img' src="images/show1_hover.png" /><p>选项1</p></li>
        <li class='aaa'><img class='img'  src="images/show4.png" /><p>选项2</p></li>
        <li class='aaa'><img class='img' src="images/show3.png" /><p>选项3</p></li>
        <li class='aaa'><img class='img' src="images/show4.png" /><p>选项4</p></li>
      </ul>
      <ul class = 'ul-content'>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
  </body>
  <script type="text/javascript">
   $().ready(function(){
      $('.aaa').click(function(){
        var index = $(this).index(); //console.log(index);
        $('.ul-content li').eq(index).show().siblings().hide()
        $(this).addClass('bkg').siblings().removeClass('bkg')
        var show1= ['images/show1.png', 'images/show4.png', 'images/show3.png', 'images/show4.png'];
        var show_hover= ['images/show1_hover.png', 'images/show4_hover.png', 'images/show3_hover.png', 'images/show4_hover.png'];
        for (var i = 0; i < 4; i++) {
          if(i==index){
            //console.log(show_hover[i]);
            $('.img').eq(i).attr('src',show_hover[i]);
          }else{
            $('.img').eq(i).attr('src',show1[i]);
          }
        }
      })
   })
  </script>
</html>

DrowningFisher

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手机端带图片的选项卡

选项卡 *{margin: 0px; padding: 0px; text-decoration: none; list-style: none;} body{max-width: 640px; min-width: 320px; width: 100%; height: 100%; margin: 0px auto;} .tab-list{w
复制链接

扫一扫