标签页(tab)切换的原生js,jquery和bootstrap实现

概述

这是我在学习课程Tab选项卡切换效果时做的总结和练手。

原课程中只有原生js实现,jquerybootstrap实现是我自己补上的。

本节内容

  • 标签页(tab)切换的原生js实现
  • 标签页(tab)切换的jquery实现
  • 标签页(tab)切换的bootstrap实现

标签页(tab)切换的原生js实现

说明:

  1. 代码是我自己写的,与课程中的不一样。
  2. 主要利用display:none来把部分内容隐藏而显示其它内容。
  3. 遇到了事件的循环绑定,我是利用添加id使其成为钩子来解决的。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style type="text/css">
        *{
            font-family: Times;
        }

        #main {
            font-size: 13px;
            height: 100px;
            width: 300px;
            border: 1px solid #c0c0c0;
        }

        #top_column {
            height: 30px;
            width: 300px;
        }

        #top_column div {
            height: 30px;
            width: 75px;
            background-color: #fffff0;
            text-align: center;
            line-height: 30px;
            border: 1px solid #c0c0c0;
            margin: -1px -1px 0px -1px;
        }

        #top_column div:hover {
            background-color: #fff;
            font-weight:bold;
            color: orange;
        }   

        .top_column_hover {
            background-color: #fff;
            font-weight:bold;
            color: orange;
        }           

        #bottom_column {
            height: 70px;
            width: 300px;
        }

        #bottom_column a {
            height: 35px;
            width: 140px;
            display: block;
            text-align: left;
            text-decoration: none;
            outline: none;
            color: black;
            line-height: 35px;
            padding-left: 10px;
            float: left;
        }

        #bottom_column a:hover {
            color: orange;
        }

        #main div {
            float: left;
        }

    </style>
</head>
<body>
    <div id="main">
        <div id="top_column">
            <div class="column_notice">公告</div>
            <div class="column_rule">规则</div>
            <div class="column_forum">论坛</div>
            <div class="column_security">安全</div>
        </div>
        <div id="bottom_column">
            <div class="content_notice" style="display:block">
                <a href="#" class="notice1">颠覆式创新</a>
                <a href="#" class="notice2">旗舰来了</a>
                <a href="#" class="notice3">全国首测</a>
                <a href="#" class="notice4">千年一遇</a>
            </div>
            <div class="content_rule" style="display:none">
                <a href="#" class="rule1">司机高速</a>
                <a href="#" class="rule2">北欧村名</a>
                <a href="#" class="rule3">高校老师</a>
                <a href="#" class="rule4">公安工作组</a>
            </div>
            <div class="content_forum" style="display:none">
                <a href="#" class="forum1">百度贴吧</a>
                <a href="#" class="forum2">哈尔滨</a>
                <a href="#" class="forum3">麦当劳</a>
                <a href="#" class="forum4">光头哥</a>
            </div>
            <div class="content_security" style="display:none">
                <a href="#" class="security1">经纪人</a>
                <a href="#" class="security2">以上处于</a>
                <a href="#" class="security3">国足领队</a>
                <a href="#" class="security4">国务院</a>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        window.onload=tab;

        function tab(){
            var top_column=document.getElementById("top_column").getElementsByTagName("div");
            var bottom_column=document.getElementById("bottom_column").getElementsByTagName("div");

            for(var i=0;i<top_column.length;i++){
                top_column[i].id=i;
                top_column[i].onmouseover=function(){
                    tab_content(this.id);
                }
            }

            function tab_content(i){

                for(var j=0;j<top_column.length;j++){
                        top_column[j].className="top_column_not_hover";
                        bottom_column[j].style.display="none";
                }

                top_column[i].className="top_column_hover";
                bottom_column[i].style.display="block";
            }
        }
    </script>
</body>
</html>

标签页(tab)切换的jquery实现

说明:

  1. 效果其实和原生js实现是一样的。
  2. 因为我想写一下jquery代码练练手,所以只是把原生js实现中的js代码改成了jquery的形式。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style type="text/css">
        *{
            font-family: Times;
        }

        #main {
            font-size: 13px;
            height: 100px;
            width: 300px;
            border: 1px solid #c0c0c0;
        }

        #top_column {
            height: 30px;
            width: 300px;
        }

        #top_column div {
            height: 30px;
            width: 75px;
            background-color: #fffff0;
            text-align: center;
            line-height: 30px;
            border: 1px solid #c0c0c0;
            margin: -1px -1px 0px -1px;
        }

        #top_column div:hover {
            background-color: #fff;
            font-weight:bold;
            color: orange;
        }   

        .top_column_hover {
            background-color: #fff;
            font-weight:bold;
            color: orange;
        }           

        #bottom_column {
            height: 70px;
            width: 300px;
        }

        #bottom_column a {
            height: 35px;
            width: 140px;
            display: block;
            text-align: left;
            text-decoration: none;
            outline: none;
            color: black;
            line-height: 35px;
            padding-left: 10px;
            float: left;
        }

        #bottom_column a:hover {
            color: orange;
        }

        #main div {
            float: left;
        }

    </style>
</head>
<body>
    <div id="main">
        <div id="top_column">
            <div class="column_notice">公告</div>
            <div class="column_rule">规则</div>
            <div class="column_forum">论坛</div>
            <div class="column_security">安全</div>
        </div>
        <div id="bottom_column">
            <div class="content_notice" style="display:block">
                <a href="#" class="notice1">颠覆式创新</a>
                <a href="#" class="notice2">旗舰来了</a>
                <a href="#" class="notice3">全国首测</a>
                <a href="#" class="notice4">千年一遇</a>
            </div>
            <div class="content_rule" style="display:none">
                <a href="#" class="rule1">司机高速</a>
                <a href="#" class="rule2">北欧村名</a>
                <a href="#" class="rule3">高校老师</a>
                <a href="#" class="rule4">公安工作组</a>
            </div>
            <div class="content_forum" style="display:none">
                <a href="#" class="forum1">百度贴吧</a>
                <a href="#" class="forum2">哈尔滨</a>
                <a href="#" class="forum3">麦当劳</a>
                <a href="#" class="forum4">光头哥</a>
            </div>
            <div class="content_security" style="display:none">
                <a href="#" class="security1">经纪人</a>
                <a href="#" class="security2">以上处于</a>
                <a href="#" class="security3">国足领队</a>
                <a href="#" class="security4">国务院</a>
            </div>
        </div>
    </div>

    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">

    $(window).load(function(){
        var $top_column=$("#top_column div");
        var $bottom_column=$("#bottom_column div");

        $.each($top_column,function(i,item){
            $(item).hover(tab_content);
        })

        function tab_content(){
            $.each($top_column,function(i,item){
                $(item).attr("class", "top_column_not_hover");
            })

            $.each($bottom_column,function(i,item){
                $(item).hide();
            })

            var index=$top_column.index($(this));
            $bottom_column.eq(index).show();
            $top_column.eq(index).attr("class", "top_column_hover");
        }
    })
    </script>
</body>
</html>

标签页(tab)切换的bootstrap实现

说明:

  1. 代码中不需要额外写js,只需引用jquerybootstrap文件即可。
  2. 虽然不需要写js,但是缺点是需要点击,并且鼠标离开后回复原状,解决这些问题的话需要写js
  3. 虽然bootstrap看起来很华丽,而且很简便。但是在一些小改动上面很麻烦,而且会踩很多坑。所以如果需要细致并且频繁修改网站的话,不建议用bootstrap搭建网站。
  4. 踩坑记录:box-sizing 属性的content-boxborder-box(其实这也是盒模型的基本)。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style type="text/css">
        *{
            font-family: Times;
        }

        #main {
            font-size: 13px;
            height: 100px;
            width: 300px;
            border: 1px solid #c0c0c0;
            margin:10px 10px;
            box-sizing: content-box;
        }

        #myTab {
            height: 30px;
            width: 300px;
        }

        #myTab div {
            height: 30px;
            width: 75px;
            background-color: #fffff0;
            text-align: center;
            line-height: 30px;
            border: 1px solid #c0c0c0;
            margin: -1px -1px 0px -1px;
            box-sizing: content-box;
        }

        #myTab div:hover {
            background-color: #fff;
            font-weight:bold;
            color: orange;
            cursor: pointer;
        }               

        #myTabContent {
            height: 70px;
            width: 300px;
        }

        #myTabContent a {
            height: 35px;
            width: 140px;
            display: block;
            text-align: left;
            text-decoration: none;
            outline: none;
            color: black;
            line-height: 35px;
            padding-left: 10px;
            float: left;
        }

        #myTabContent a:hover {
            color: orange;
        }

        #main div {
            float: left;
        }

    </style>
</head>
<body>
    <div id="main">
        <div id="myTab" class="nav nav-tabs">
            <div href="#notice" data-toggle="tab">公告</div>
            <div href="#rule" data-toggle="tab">规则</div>
            <div href="#forum" data-toggle="tab">论坛</div>
            <div href="#security" data-toggle="tab">安全</div>
        </div>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="notice">
                <a href="#" class="notice1">颠覆式创新</a>
                <a href="#" class="notice2">旗舰来了</a>
                <a href="#" class="notice3">全国首测</a>
                <a href="#" class="notice4">千年一遇</a>
            </div>
            <div class="tab-pane fade" id="rule">
                <a href="#" class="rule1">司机高速</a>
                <a href="#" class="rule2">北欧村名</a>
                <a href="#" class="rule3">高校老师</a>
                <a href="#" class="rule4">公安工作组</a>
            </div>
            <div class="tab-pane fade" id="forum">
                <a href="#" class="forum1">百度贴吧</a>
                <a href="#" class="forum2">哈尔滨</a>
                <a href="#" class="forum3">麦当劳</a>
                <a href="#" class="forum4">光头哥</a>
            </div>
            <div class="tab-pane fade" id="security">
                <a href="#" class="security1">经纪人</a>
                <a href="#" class="security2">以上处于</a>
                <a href="#" class="security3">国足领队</a>
                <a href="#" class="security4">国务院</a>
            </div>
        </div>
    </div>

    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

    <script type="text/javascript">

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

原文地址:https://www.cnblogs.com/yangzhou33/p/8407399.html

时间: 2024-11-05 18:31:45

标签页(tab)切换的原生js,jquery和bootstrap实现的相关文章

bootstrap 标签页tab切换js(含报错原因)

booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留作自己工作备忘. 1 $('a[data-toggle="tab"]') 2 $('#myTab a[href="#profile"]').tab('show') 3 $('#myTab a:first').tab('show') 4 $('#myTab a:last'

bootstrap标签页(Tab)插件

标签页(Tab)在Bootstrap导航元素一章中简介过,通过结合一些data属性,您可以轻松地创建一些标签页界面.通过这个插件您可以把内容放置在标签页或胶囊式标签页甚至是下拉菜单标签页中. 用法 您可以通过以下两个方式来启用标签页 1.通过data属性:您需要添加data-toggle="tab"或data-toggle="pill"到锚文本链接中.例如: <!DOCTYPE html><html><head><meta

解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表.(这里暂时未考虑自适应问题). 由于使用的格式和参考不一样,所以自己贴一下,方便自己以后使用. 2.在js文件页面最上面定义一个js数组.如var charts = new Array();

bootstrap标签页(Tab)插件事件

事件 下表列出了标签页(Tab)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tab 该事件在标签页显示时触发,但是必须在新标签页被显示之前.分别使用 event.target 和event.relatedTarget 来定位到激活的标签页和前一个激活的标签页. $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // 激活的标签页 e.relatedTarget

vue react 与原生 js jquery 渲染时间简单对比

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

使用Fragment+ViewPager,仿微信实现多页Tab切换

我们今天实现类似微信的首页的滑动Tab效果:          郭霖有一篇博客http://blog.csdn.net/guolin_blog/article/details/13171191,讲过如何实现,但是他的demo不能通过滑动切换,只能通过点击按钮切换. 通过viewpager,我们可以完全实现微信的效果. 先看看我的实现效果:      主页面代码 package com.example.fragmentdemo; import java.util.ArrayList; import

用标签页TitleSwitch切换不通的控制器

教程效果: 项目开发中效果: 各种源码: TitleSwitch.h 与 TitleSwitch.m (这个是修改过的升级版本) // // TitleSwitch.h // TitleSwitch // // Created by YouXianMing on 14/11/4. // Copyright (c) 2014年 YouXianMing. All rights reserved. // #import <UIKit/UIKit.h> /** * 使用细节 * TitleSwitch

在jsp中同一页面中多个标签页之间切换数据展示

示例图片: 像这样的上面多个tab页下面也有多个tab页面,其实只要学会一个嵌套就可以了,现在就说一下简单的一个页面的多个tab页面的展示

Bootstrap入门(二十七)JS插件4:标签页

标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" rel="stylesheet"> 在里面创建一个容器div,添加<ul><li>来承载标签,下拉菜单也是可以嵌套进去的 第一个默认设置为被选中 <ul id="mytab" class="nav nav-tabs"> <li class="act