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=" ...

随机推荐

Hadoop_08 Hadoop重装
今日总结: 由于之前配置存在问题,今天学到后面之后发现很多bug,需要全部卸载重新配置Hadoop.ZooKeeper以及Hbase.
禅道16.2版本发布！主要新增专业研发看板，修复Bug
大家好,禅道16.2发布了,本次发布在项目管理模型层面新增了专业研发看板功能,今后禅道全面支持Scrum.瀑布.看板3种项目管理模型,功能更加健全,用户选择更加灵活. 视频地址:https://www ...
Emmet Documentation ( Abbreviations+CSS Abbreviations )
Emmet Documentation Emmet - the essential toolkit for web-developers Abbreviations Abbreviations Syn ...
#根号分治，树形dp#CF1039D You Are Given a Tree
题目给定一棵树,对于 $k\in [1,n]$ 问最多可以分成多少段长度为 $k$ 的不交路径分析首先考虑对于单个 $k$ 怎么做. 设 $dp[x]$ 表示点 $x$ 往下 ...
首届OpenHarmony竞赛训练营结营颁奖，75所高校学子助力建设开源生态
由OpenAtom OpenHarmony(以下简称"OpenHarmony")项目群工作委员会和OpenHarmony项目群技术指导委员会主办的首届OpenHarmony竞赛 ...
vs报错：RC1004 unexpected end of file found
如图,在编译代码时,出现报错:RC1004 unexpected end of file found 原因是,cpp最后要多一行才行,不然就会报这个错误错误示例: int main() { ret ...
mogdb里xlog相关的几个参数
openGauss/MogDB 3.0 闪回恢复测试本文出处:https://www.modb.pro/db/411368 介绍闪回恢复功能是数据库恢复技术的一环,可以有选择性的撤销一个已提交事务 ...
MogDB/openGauss存储过程的修改
MogDB/openGauss 存储过程的修改 SQL 中没有提供显式的存储过程修改命令,通常需要通过 REPLACE 关键字来指定使用当前的存储过程替代之前的同名存储过程. 将前文定义的存储过程替换 ...
webpack 打包jquery
前言记一次配置webpack jqeury中的案例. 正文选取自己需要安装的jquery版本号 dependencies:{ //此处的jquery版本根据npm后的版本来看,会有安装版本的提示 ...
力扣1082(MySQL)-销售分析Ⅰ（简单）
题目: 产品表:Product 销售表:Sales 编写一个 SQL 查询,查询总销售额最高的销售者,如果有并列的,就都展示出来. 以任意顺序返回结果表. 查询结果格式如下所示. Product ...

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

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

随机推荐

热门专题