建站技术文档

将想法与热点信息与您一起分享

JS实现下拉框切换和tab标签切换

2019-09-25

现在商城网页上会有下拉框切换内容,是如何实现的呢,研究了一天,在调整js代码和查找bug。最终完成了自己想要的效果,我没有写CSS样式,只是实现了基本功能,如果对你有所帮助,可以自己写css,使其更加美观。废话不多说,直接复制代码即可看到演示效果。

1.效果展示:

1248607-20171127133209550-2103579146.gif

2.代码实现:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>


<style type="text/css">
*{padding:0;margin:0;}
#tabs {background: #ff0;border: 1px solid #000;}
#tabs ul{width: 100%;display: block;height: 40px;margin-bottom: 20px;}
  #tabs li{float: left;list-style: none;border: 1px solid #ccc;padding:10px;cursor:pointer;    background: #0ff;}
.diamonded {width: 500px;background: #ccc;margin: 20px auto;}
#tabs div {margin-left: 10px;}
div#content {padding: 20px 0;text-align: center;}
.cc{clear:both;}
</style>


</head>

<body class="diamond">


<div class="diamonded">
    <ul id="tabs">
  <li >ALL</li>
  <li>change1</li>
    <li>change2</li>
    <li>change3</li>
    <div class="cc"></div>
    </ul>
<div id="content">
    <div id ="chanpin1" >
        记得早先少年时
      大家诚诚恳恳
      说一句 是一句
    </div>

    <div id ="chanpin2"  >
      清早上火车站
      长街黑暗无行人
      卖豆浆的小店冒着热气
    </div>

    <div id ="chanpin3">
      从前的日色变得慢
      车,马,邮件都慢
      一生只够爱一个人
    </div>

</div>
</div>



<script>
  $(function(){
    
      var li=$('#tabs li');
      var len=li.length;
      li.click(function(){
      //  alert(123);
       var t = parseInt(li.index(this));
       // var id=$('#chanpin'+t);
      //  alert(t) ;
    for(var i= 1;i<len;i++){
       if(t==i){
       // alert(i);
        $('#chanpin'+t).show();

       }else{
         $('#chanpin'+i).hide();
       }
       if(t==0){$('#chanpin'+i).show();}
       }
     
      });   
  });

</script>




</body>
 
</body>
</html>

I NEED TO BUILD WEBSITE

我需要建站

*请认真填写需求信息,我们会在24小时内与您取得联系。