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

现在商城网页上会有下拉框切换内容，是如何实现的呢，研究了一天，在调整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标签切换的更多相关文章

下拉菜单效果和tab选项卡切换
//下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
JS模拟下拉框select
最近做的一个项目有下拉框同事都是用的是美化控件,但是用美化控件当然是好但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
Js获取下拉框选定项的值和文本
Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...
js改变下拉框内容
js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...
JS 实现下拉框去重
JS 实现下拉框去重学习内容: 需求总结: 学习内容: 需求用 JS 下拉框去重实现代码 <html> <head> <meta http-equiv=" ...
JS 实现下拉框回显
JS 实现下拉框回显学习内容: 需求总结: 学习内容: 需求用 JS 实现下拉框回显实现代码 <!DOCTYPE html> <html lang="en" ...
JS实现下拉框选中不同的项，对应显示不同的信息
实现的效果如下图: 页面代码下拉框: <select id="select3" name="select3" onchange="showli ...
快速解决js开发下拉框中blur与click冲突
在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦 ...
avalon.js 多级下拉框实现
学习avalon.js的时候,有一个多级下拉框的例子,地址戳这里代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值和页面初始化功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...
js 设置下拉框的默认值
设置下拉框的默认值,直接在option中增加selected就可以了.但是现在要使用JS来设置它的默认值,代码如下: <select name="aaa" id=" ...

随机推荐

windows系统设置状态栏时间显示读秒
windows系统设置状态栏时间显示读秒要实现的效果如下图: 一.打开注册表 WIN+R输入[cmd]之后输入[regedit]回车二.修改注册表在注册表地址栏输入: HKEY_CURRENT_ ...
详解数仓对象设计中序列SEQUENCE原理与应用
本文分享自华为云社区<GaussDB(DWS)对象设计之序列SEQUENCE原理与使用方法介绍>,作者:VV一笑. 1. 前言适用版本:8.2.1及以上版本序列SEQUENCE用来生成 ...
#莫比乌斯反演，整除分块，欧拉定理#U137539 虚伪的最小公倍数
题目 \[\large\prod_{i_1=1}^n\prod_{i_2=1}^n\dots\prod_{i_k=1}^n\frac{i_1*i_2*\dots*i_k}{gcd(i_1,i_2,\d ...
未来已来，OpenHarmony 3.2 Release发布，迈入发展新阶段
2023年4月9日,在社区开发者的期盼中,在春风送暖万物更新的季节里,我们迎来了OpenAtom OpenHarmony(以下简称"OpenHarmony")3.2 Relea ...
Numpy的数组对象
数组对象 NumPy 最重要的一个特点是其 N 维数组对象 ndarray,它是一系列同类型数据的集合,从0 开始进行集合中元素的索引:ndarray 对象是用于存放同类型元素的多维数组,其中的每个元 ...
通过path在windows下临时修改python和pip路径以便于配置环境只对当前命令行窗口生效
配置前在cmd命令行下输入新env的路径 path=D:\Miniconda2\envs\openmmlab\openmmlab;D:\Miniconda2\envs\openmmlab\openm ...
在centOS上配置web服务器
centos,web服务,apache,ftp服务器,mysql,makefile (1). 检查系统是否正常 # more /var/log/messages //检查有无系统内核级错误信息 # d ...
CF-938(C-E)
CF-938 C 没啥好分析的,就记录一下我因为没有清空s[n+1].上取整写成了下取整卡了一个多小时(╬▔皿▔)╯ const int N=2e5+5; int a[N],p[N],s[N]; vo ...
顺通ERP：精细敏捷的设计理念，得到了消费者的喜爱
顺通ERP是近年来备受关注的一款ERP品牌,其设计精细,操作便捷,备受消费者喜爱.那么,顺通ERP到底怎么样呢?属于什么档次呢? 首先,从品质上来看,顺通ERP具备高度的稳定性,能够确保企业的日常运营 ...
安装Visual Studio 2010 教程
1.下载软件方法一:关注[ 火耳软件安装 ]公众号获取软件,里面还有很多类型的其他软件或者: 方法二:我的分享链接:https://pan.baidu.com/s/1_Ow2YR-kbnbSc6o ...

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

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

随机推荐

热门专题