前端实现选项卡切换的三种方式_前端栏目切换的方法-程序员宅基地

技术标签： js JQuery

实现选项卡切换的三种方式

首先我用Jquery库实现了一个简单的效果，

只需要点击上面的导航标签即可切换下方内容，Html代码如下

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>tab切换</title>
    <style type="text/css">
        *{padding:0;margin:0;font:normal 15px "微软雅黑";color:#000;}
        ul{list-style-type: none;padding-left: 5px;margin-bottom: -2px}
        .tab{width:500px;margin: 10px auto}
        a{text-decoration: none;}
        .title li{display: inline-block;border: 1px solid #999;border-bottom: 2px solid #a00;background: #fff;text-align: center;width: 60px;height: 30px;margin: 0 1px;line-height: 30px}
        .title .active{border-top:2px solid #a00;border-bottom: 2px solid #fff; }
        #content{margin: 0;border: 1px solid #ccc;border-top: 2px solid #a00;width: 300px}
        #content div{display: none;padding: 10px 0}
        #content .mod{display: block;}
    </style>
</head>
<body>
<div class="tab">
    <ul class="title">
        <li class="active"><a href="#">房产</a></li>
        <li><a href="#">家居</a></li>
        <li><a href="#">二手房</a></li>
        <!--<li><a href="#">家居</a></li>-->
    </ul>
    <div id="content">
        <div class="mod">
            <ul>
                <li><a href="#">房产内容1</a> </li>
                <li><a href="#">房产内容2</a> </li>
                <li><a href="#">房产内容3</a> </li>
            </ul>
        </div>
        <div class="mod" style="display: none">
            <ul>
                <li><a href="#">家居内容1</a> </li>
                <li><a href="#">家居内容2</a> </li>
                <li><a href="#">家居内容3</a> </li>
            </ul>
        </div>
        <div class="mod" style="display: none">
            <ul>
                <li><a href="#">二手房内容1</a> </li>
                <li><a href="#">二手房内容2</a> </li>
                <li><a href="#">二手房内容3</a> </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

复制代码

Jquery代码如下：

复制代码

<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $(".title li").click(function(){
//            var $this=$(this);
//            alert($this.index());
            $(this).addClass("active").siblings().removeClass("active");
            $("#content .mod").eq($(".title li").index(this)).show().siblings("#content .mod").hide();
        });
    });
</script>

复制代码

相信大家用Jquery都是比较轻松，紧接着我又尝试了用源生的js代码来实现这种效果，效果图如下：

实现所需的html代码：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{padding: 0;margin: 0;box-sizing: border-box}
        div{width: 70%;margin: 20px auto;}
        ul{
            list-style: none;overflow: hidden;
        }
        #nav{
            width: 400px;height: 40px;text-align: center;line-height: 40px;
            background: #c5c5c5;
        }
        #nav li{
            width: 25%;height: 40px;float: left;border: 1px solid #c5c5c5;
            border-bottom: none;
        }
        #nav li.active{
            background: #fff;
        }
        #content{
            width: 400px;height: 300px;position: relative;border: 1px solid #c5c5c5;border-top: none;
        }
        #content li{width: 100%;height: 100%;position: absolute;padding: 10px;display: none}
    </style>
</head>
<body>
<div>
    <ul id="nav">
    <li class="active">选项一</li>
    <li>选项二</li>
    <li>选项三</li>
    <li>选项四</li>
</ul>
<ul id="content">
    <li style="display: block">内容一</li>
    <li>内容二</li>
    <li>内容三</li>
    <li>内容四</li>
</ul>
</div>
</body>
</html>

复制代码

js代码如下：

复制代码

<script type="text/javascript">
  var nav =document.getElementById("nav");
  var navlist = nav.children;
  var con = document.getElementById("content");
  var conlist = con.children;
  for (var i= 0;i<navlist.length;i++){
      navlist[i].index = i;
      navlist[i].onclick = function (){
          for (var m = 0;m< conlist.length;m++){
              navlist[m].className = "";
              conlist[m].style.display ="none";
          }
          this.className = "active";
          conlist[this.index].style.display = "block";
      }
  }
</script>

复制代码

如果说大家在写页面的时候需要多次实现选项卡效果，但是又不想造成代码重复该怎么办呢？我们这时候可以使用函数封装概念来封装一个函数方法来实现多次调用。

html代码同上，js封装方法代码如下：

复制代码

<script type="text/javascript">
    function change(navid,conid){
        var nav = document.getElementById(navid);
        var navlist = nav.getElementsByTagName("li");
        var con = document.getElementById(conid);
        var conlist = con.getElementsByTagName("li");
        for (i=0;i<navlist.length;i++){
            navlist[i].onclick = function (i){
                return function (){
                    for (m = 0;m<conlist.length;m++){
                        navlist[m].className ="";
                        conlist[m].style.display = "none";
                    }
                    this.className = "active";
                    conlist[i].style.display = "block";
                }
            }(i);
        }
    };
    change("nav","content");       //调用函数方法
</script>

转载至https://www.cnblogs.com/fjner/p/5808268.html

本文链接：https://blog.csdn.net/qq_35069220/article/details/82665026

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

5个超厉害的资源搜索网站，每一款都可以让你的资源满满！_最全资源搜索引擎-程序员宅基地

文章浏览阅读1.6w次，点赞8次，收藏41次。生活中我们无时不刻不都要在网站搜索资源，但就是缺少一个趁手的资源搜索网站，如果有一个比较好的资源搜索网站可以帮助我们节省一大半时间！今天小编在这里为大家分享5款超厉害的资源搜索网站，每一款都可以让你的资源丰富精彩！网盘传奇一款最有效的网盘资源搜索网站你还在为找网站里面的资源而烦恼找不到什么合适的工具而烦恼吗？这款网站传奇网站汇聚了4853w个资源，并且它每一天都会持续更新资源；..._最全资源搜索引擎

Book类的设计(Java)_6-1 book类的设计java-程序员宅基地

文章浏览阅读4.5k次，点赞5次，收藏18次。阅读测试程序，设计一个Book类。函数接口定义：class Book{}该类有四个私有属性分别是书籍名称、价格、作者、出版年份，以及相应的set 与get方法；该类有一个含有四个参数的构造方法，这四个参数依次是书籍名称、价格、作者、出版年份。裁判测试程序样例：import java.util.*;public class Main { public static void main(String[] args) { List <Book>_6-1 book类的设计java

基于微信小程序的校园导航小程序设计与实现_校园导航微信小程序系统的设计与实现-程序员宅基地

文章浏览阅读613次，点赞28次，收藏27次。相比于以前的传统手工管理方式，智能化的管理方式可以大幅降低学校的运营人员成本，实现了校园导航的标准化、制度化、程序化的管理，有效地防止了校园导航的随意管理，提高了信息的处理速度和精确度，能够及时、准确地查询和修正建筑速看等信息。课题主要采用微信小程序、SpringBoot架构技术，前端以小程序页面呈现给学生，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生信息、校园简介、建筑速看、系统信息等功能，从而实现智能化的管理方式，提高工作效率。

有状态和无状态登录

传统上用户登陆状态会以 Session 的形式保存在服务器上，而 Session ID 则保存在前端的 Cookie 中；而使用 JWT 以后，用户的认证信息将会以 Token 的形式保存在前端，服务器不需要保存任何的用户状态，这也就是为什么 JWT 被称为无状态登陆的原因，无状态登陆最大的优势就是完美支持分布式部署，可以使用一个 Token 发送给不同的服务器，而所有的服务器都会返回同样的结果。有状态和无状态最大的区别就是服务端会不会保存客户端的信息。

九大角度全方位对比Android、iOS开发_ios 开发角度-程序员宅基地

文章浏览阅读784次。发表于10小时前| 2674次阅读| 来源TechCrunch| 19 条评论| 作者Jon EvansiOSAndroid应用开发产品编程语言JavaObjective-C摘要：即便Android市场份额已经超过80%，对于开发者来说，使用哪一个平台做开发仍然很难选择。本文从开发环境、配置、UX设计、语言、API、网络、分享、碎片化、发布等九个方面把Android和iOS_ios 开发角度

搜索引擎的发展历史

搜索引擎的发展历史可以追溯到20世纪90年代初，随着互联网的快速发展和信息量的急剧增加，人们开始感受到了获取和管理信息的挑战。这些阶段展示了搜索引擎在技术和商业模式上的不断演进，以满足用户对信息获取的不断增长的需求。

随便推点

控制对象的特性_控制对象特性-程序员宅基地

文章浏览阅读990次。对象特性是指控制对象的输出参数和输入参数之间的相互作用规律。放大系数K描述控制对象特性的静态特性参数。它的意义是：输出量的变化量和输入量的变化量之比。时间常数T当输入量发生变化后，所引起输出量变化的快慢。（动态参数） ..._控制对象特性

FRP搭建内网穿透(亲测有效)_locyanfrp-程序员宅基地

文章浏览阅读5.7w次，点赞50次，收藏276次。FRP搭建内网穿透1.概述：frp可以通过有公网IP的的服务器将内网的主机暴露给互联网，从而实现通过外网能直接访问到内网主机；frp有服务端和客户端，服务端需要装在有公网ip的服务器上，客户端装在内网主机上。2.简单的图解：3.准备工作：1.一个域名（www.test.xyz）2.一台有公网IP的服务器(阿里云、腾讯云等都行)3.一台内网主机4.下载frp，选择适合的版本下载解压如下：我这里服务器端和客户端都放在了/usr/local/frp/目录下4.执行命令# 服务器端给执_locyanfrp