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

1.效果展示：

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>

</head>

<body class="diamond">

    <select name="status" id="tabs">

  <option>ALL</option>

  <option>change1</option>

    <option>change2</option>

    <option>change3</option>

    </select>

<div id="content">

    <div id ="chanpin1" >

        记得早先少年时

    　　大家诚诚恳恳

    　　说一句 是一句

    </div>

    <div id ="chanpin2"  >

    　　清早上火车站

    　　长街黑暗无行人

    　　卖豆浆的小店冒着热气

    </div>

    <div id ="chanpin3">

    　　从前的日色变得慢

    　　车，马，邮件都慢

    　　一生只够爱一个人

    </div>

</div>
//JS部分实现效果


<script>

  $(function(){

      var li = $('#tabs');

      var cc=$('#tabs option');

      var len=cc.length;

      li.change(function(){

      //  alert(123);

      var t = parseInt(li.get(0).selectedIndex);

       // 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>

</html>

上述含有展示所有内容的tab标签切换的效果如下：

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>

1.Tab标签切换效果展示：

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;}

div#tabs {background: #ff0;padding: 0px 0px 20px;border: 1px solid #000;}

body.tabchange {width: 500px;margin: 0 auto;}

#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;}

.hide{display: none;}

#tabs div {margin-left: 10px;}

</style>

</head>

<body class="tabchange">

  <div id="tabs">

    <ul width="100%">

  <li class="on">change1</li>

  <li>change2</li>

  <li>change3</li>

  </ul>

    <div>

记得早先少年时 大家诚诚恳恳 说一句 是一句

    </div>

    <div class="hide" >

清早上火车站 长街黑暗无行人 卖豆浆的小店冒着热气

    </div>

    <div class="hide">

从前的日色变得慢 车，马，邮件都慢 一生只够爱一个人

    </div>

</div>

<script type="text/javascript">

  $(function(){

             var oTab = document.getElementById("tabs");

             var oUl = oTab.getElementsByTagName("ul")[0];

             var oLis = oUl.getElementsByTagName("li");

             var oDivs= oTab.getElementsByTagName("div");

             for(var i= 0,len = oLis.length;i<len;i++){

                 oLis[i].index = i;

                 oLis[i].onclick = function() {

                     for(var n= 0;n<len;n++){

                         oLis[n].className = "";

                         oDivs[n].className = "hide";

                     }

                     this.className = "on";

                     oDivs[this.index].className = "";

                 }

             };

         })

</script>

</body>

</html>

1.鼠标滑过切换的效果图：

2.另一种简单的Jquery代码实现tab标签切换（如果想实现点击切换，只需把mouseover改为click即可）

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>几行简单的jQuery代码搞定tab标签切换效果</title>

<style>

*{ margin:0; padding:0;list-style: none;}

body {font:12px/1.5 Tahoma;}

#outer {width:450px;margin:150px auto;}

#tab {overflow:hidden;zoom:1;background:#000;border:1px solid #000;}

#tab li {float:left;color:#fff;height:30px;    cursor:pointer;    line-height:30px;padding:0 20px;}

#tab li.current {color:#000;background:#ccc;}

#content {border:1px solid #000;border-top-width:0;}

#content ul {line-height:25px;display:none;    margin:0 30px;padding:10px 0;}

</style>

</head>

<body>

<!-- html代码begin -->

<div id="outer">

    <ul id="tab">

        <li class="current">tab标签</li>

        <li>qq在线客服代码</li>

        <li>css3</li>

    </ul>

    <div id="content">

        <ul style="display:block;">

           <a>tab标签</a>

        </ul>

        <ul>

            <a>qq在线客服代码</a>

        </ul>

        <ul>

           <a>css3</a>

        </ul>

    </div>

</div>

<!-- html代码end -->

<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>

<script>

    $(function(){

        window.onload = function()

        {

            var $li = $('#tab li');

            var $ul = $('#content ul');

            $li.mouseover(function(){

                var $this = $(this);

                var $t = $this.index();

                $li.removeClass();

                $this.addClass('current');

                $ul.css('display','none');

                $ul.eq($t).css('display','block');

            })

        }

    });

</script>

</body>

</html>

！！！提醒：
 关于最后一种实现方式，JS和jquery中声明变量的时候，最好不要使用 “var $li=$('#xxx')”;在一些程序中这样写Js代码是不起作用的，如果声明变量可以直接使用“var li=$('#xxx');”即可

JS实现下拉框切换和tab标签切换的更多相关文章

  1. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  3. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  4. js改变下拉框内容

      js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...

  5. JS 实现下拉框去重

    JS 实现下拉框去重 学习内容: 需求 总结: 学习内容: 需求 用 JS 下拉框去重 实现代码 <html> <head> <meta http-equiv=" ...

  6. JS 实现下拉框回显

    JS 实现下拉框回显 学习内容: 需求 总结: 学习内容: 需求 用 JS 实现下拉框回显 实现代码 <!DOCTYPE html> <html lang="en" ...

  7. JS实现下拉框选中不同的项，对应显示不同的信息

    实现的效果如下图: 页面代码 下拉框: <select id="select3" name="select3" onchange="showli ...

  8. 快速解决js开发下拉框中blur与click冲突

    在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦 ...

  9. avalon.js 多级下拉框实现

    学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...

  10. js 设置下拉框的默认值

    设置下拉框的默认值,直接在option中增加selected就可以了.但是现在要使用JS来设置它的默认值,代码如下: <select name="aaa" id=" ...

随机推荐

  1. 机器语言编写helloworld

    kvmtool下载编译 git clone https://github.com/kvmtool/kvmtool.git 下载后进入到目录执行make即可. 补码 计算机怎么表示负数?以四位有符号数为 ...

  2. #数学期望，高斯消元#洛谷 3232 [HNOI2013]游走

    题目 分析 如果计算出边的期望经过次数那就可以算出来答案 首先转换成点的期望经过次数,设\(dp[x]\)表示点\(x\)的期望经过次数 那么\(dp[x]=\sum_{y\in son}\frac{ ...

  3. OHOS IDE和SDK的安装方法

    参照OpenHarmony应用开发环境安装流程,下载安装OHOS的IDE,过程中需要全程联网. IDE,安装至D:\Tools\Huawei\DevEcoStudio. IDE安装成功之后,按照提示下 ...

  4. Java break、continue 详解与数组深入解析：单维数组和多维数组详细教程

    Java Break 和 Continue Java Break: break 语句用于跳出循环或 switch 语句. 在循环中使用 break 语句可以立即终止循环,并继续执行循环后面的代码. 在 ...

  5. SQL（Structured Query Language）简介和常见 SQL 命令示例

    简介 SQL(Structured Query Language)是一种用于访问和操作关系型数据库的标准语言.它是一个功能强大的语言,用于执行各种数据库操作,包括检索数据.插入新记录.更新记录.删除记 ...

  6. openGauss基于4路鲲鹏服务器的性能调优

    1.概述 本文主要描述了在4路鲲鹏服务器上,通过软硬件协同优化配置达到openGauss数据库的极致性能的方法. 主要包括软硬件要求.BIOS配置.网卡配置.磁盘配置.服务器参数设置.数据库参数配置. ...

  7. 报表如何集成 echarts 官网示例图

    Echarts,江湖人称一个纯 Javascript 的图表库,图形种类星罗棋布且个个颜值爆表,可以轻松驾驭 PC 和移动设备,与绝大部分浏览器都可称兄道弟,而且已然众多拥趸,还有不少报表对它采取了嫁 ...

  8. 重新点亮shell————函数[七]

    前言 简单整理一下函数. 正文 自定义函数: function fname(){ 命令 } 函数的执行: fname 函数作用范围的变量: local 变量名 函数的参数 $1 $2 $3 .... ...

  9. mysql 必知必会整理—数据库的维护[十八]

    前言 简单介绍一下数据库的维护. 正文 像所有数据一样,MySQL的数据也必须经常备份. 由于MySQL数据库是基于磁盘的文件,普通的备份系统和例程就能备份MySQL的数据. 但是,由于这些文件总是处 ...

  10. 接口API用例自动转locust测试用例

    做接口测试是必要的,写完接口测试用例,再写locust压测脚本,其实差异不大: 写个简单的py,把接口测试脚本转为locust压测脚本,本例只是简单的示范: 原接口校验脚本: 1 # -*- codi ...