2. 程式人生 > >JQUERY實現TAB切換

JQUERY實現TAB切換

阿新 • • 發佈：2019-01-31

博主是一枚前端小菜鳥，因為挺長時間沒接觸頁面佈局了，居然連tab欄切換都給忘了，後來博主看了一些前端資料還有書，發現網上的很多方法都雜亂無章，看的雲裡霧裡的，冗餘程式碼太多，這讓新手小白會很苦惱，所以博主想自己通過小菜鳥的視角來寫一個用jquery實現的tab欄切換，而且複製貼上程式碼到你們自己的編輯器，就能直接檢視效果的哦，非常方便比心♥♥，喜歡博主寫的文章的可以頂一下，或者再底下評論哈，讓我知道你們的存在，讓我們共同進步！

好了，廢話不多說，直接上程式碼！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta
 
 charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
 

            margin-top: 100px;
        }

        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }

        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height
 
: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }

        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }

        .products {
            width: 1002px;
            border: 1px solid #ddd;
            height: 476px;
        }

        .products .main {
            float: left;
            display: none;
        }

        .products .main.selected {
            display: block;
        }

        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }

    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li class="tab-item active">標題1♥</li>
        <li class="tab-item">標題2♥</li>
        <li class="tab-item">標題3♥</li>
        <li class="tab-item">標題4♥</li>
    </ul>
    <div class="products">
        <div class="main selected">
            <span class="a">1</span>
        </div>
        <div class="main">
            <span class="a">2</span>
        </div>
        <div class="main">
            <span class="a">3</span>
        </div>
        <div class="main">
            <span class="a">4</span>
        </div>
    </div>
</div>

</body>
    <script>
        $(function () {
            $(".wrapper .tab-item").click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                $(".products .main").eq($(this).index()).show().siblings().hide();
            })
        })
    </script>
</html>

具體效果看gif！
這裡寫圖片描述
樣式親們可以自由發揮哦！

相關推薦

轉：JQuery實現tab切換

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab-JQ</title> <style>

jquery實現tab切換完整程式碼

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="

JQUERY實現TAB切換

博主是一枚前端小菜鳥，因為挺長時間沒接觸頁面佈局了，居然連tab欄切換都給忘了，後來博主看了一些前端資料還有書，發現網上的很多方法都雜亂無章，看的雲裡霧裡的，冗餘程式碼太多，這讓新手小白會很苦惱，所以博主想自己通過小菜鳥的視角來寫一個用jquery實現的tab欄

用jquery實現Tab切換選單

1.效果圖： 2.html和jq程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</

JavaScript及jQuery實現tab標籤頁切換

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <

jQuery實現TAB選項卡切換特效簡單演示

本文例項為大家分享jQuery實現TAB選項卡切換特效，供大家參考，具體內容如下1、tab切換 on?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

jquery實現tab頁切換

關聯設定       <h2 class="h2_ch"><span id="tabs" class="l">        <a href="javascript:void(0);" ref="#tab_1" title="基本資訊" clas

原生JS實現tab切換--web前端開發

soft 楊冪 microsoft hidden isp 老婆 tex oct rip tab切換非常常見，應用非常廣泛，比較實用，一般來說是一個網站必不可少的一個效果。例如：https://123.sogou.com/中的一個tab部分： 1、案例源代碼 <!DO

怎麽用JavaScript實現tab切換

代碼 www. 股神 .class 最終 ccf article cti ext 先看一下代碼實現後的最終效果： 用JavaScript實現思路很簡單，就是先把所有的內容隱藏，點擊標題對應的內容顯示， css代碼如下： <style type="text/css"

jQuery 實現tab標簽實例

python<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

使用jQuery進行tab切換

val 經典 img code foo tdi ML AS bsp HTML： <div class="food"> <div class="tabsdiv"> <ul> <li c

jQuery帶tab切換搜尋框樣式程式碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; list-style: none; } .

element,點選檢視，實現tab切換：

點選檢視，實現tab切換：   程式碼如下： <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-colum

js實現tab切換功能

一、初始化html結構 <div class="tab" id="tab"> <span class="active">工作日</span> <span>休息日</span> </div> <d

Unity3D實現Tab切換，頁面切換功能

第一篇部落格，僅作為個人在學習過程中記錄作用 正文 之前公司遇到幾個兩個專案都有一個列表切換的功能，具體功能就是點選tab列表，內容根據tab切換來變換，效果如下： 這樣一個很常見功能 網上例子較少，後來學到一個方法，幾步就可以實現，不需要寫程式碼 第一步 建

小程式如何實現tab切換，一部到位

筆者之前嘗試著其他教程：使用swiper來做切換。但是小程式中swiper存在很多限制，比如高度的限制，所以放棄了這種方案，本文將提供另一個方案。 小程式實現tab切換很簡單，只需要完成兩部分。 1

jquery的tab切換

.tab{ display: flex; justify-content: center; } .tab li{ list-style: none; width: 150px; height: 50px;

HTML使用Radio Input來實現Tab切換

在開發中看見僅使用css技巧，就用HTML的Radio Input來實現的Tab的切換，連click事件都未使用。程式碼效果如下： <!DOCTYPE HTML> <html> <header> <link rel="stylesheet" href="

android實現TAB切換附原始碼

電腦上的檔案太多了，能用的不能用的有點亂，備份上傳一下，方便自己以後查詢，其實這裡邊有些東西值得自己深入瞭解一下，工作忙也沒時間寫筆記了，哎，走的太快了 原始碼編譯執行效果如下：                        工程是Android Studio的，版本是2.

vue元件實現Tab切換功能

方法一： http://www.jianshu.com/p/5757e2198304 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <ti