純JS實現tab選項卡切換效果

阿新 • • 發佈：2018-12-19

今天學到的用js寫選項卡，有高亮效果，廢話不多說，直接上程式碼吧！！！

注意事項：css程式碼中有一個隱藏其他div的屬性， display: none;這個一定要注意，要不然你寫的都會顯示出來
html程式碼：

<!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" content="ie=edge">
    <title>Document</title>
    <link href="./css/demo.css" rel="stylesheet" type="text/css" />
</head>

<body>

</body>
<!-- 文學 -->
<div class="xue">
    <div class="Middle_wen">
        <div class="Middle_wen_left">
            <a class="text-active">&nbsp&nbsp&nbsp&nbsp&nbsp文學&nbsp |</a>

            <a>&nbsp財經金融&nbsp |</a>

            <a>&nbsp哲學宗教&nbsp |</a>

            <a>&nbsp藝術&nbsp |</a>

            <a>&nbsp工藝技術&nbsp&nbsp&nbsp&nbsp&nbsp</a>
        </div>
    </div>
    <div class="Middle_hua1">
        <div class="Middle_hua">
            <div>
                <p>
                    <a href="">1那列維奇160多幅畫作將在俄博物館展出</a>
                </p>
                <P>
                    1 那列維奇160多幅畫作將在俄博物館展出
                </P>
            </div>


        </div>
        <div class="Middle_hua">
            <div>
                <p>
                    <a href="">2金融就是金融金融金融就是金融金融</a>
                </p>
                <P>
                    2金融就是金融金融金融就是金融金融
                </P>
            </div>
        </div>
        <div class="Middle_hua">
            <div>
                <p>
                    <a href="">3哲學，宗教，道教，基督教，佛教</a>
                </p>
                <P>
                    3哲學，宗教，道教，基督教，佛教
                </P>
            </div>
        </div>
        <div class="Middle_hua">
            <div>
                <p>
                    <a href="">4藝術，美術生，體育生，播音，音樂</a>
                </p>
                <P>
                    4藝術，美術生，體育生，播音，音樂
                </P>
            </div>
        </div>
        <div class="Middle_hua">
            <div>
                <p>
                    <a href="">5，工藝技術，挖掘機哪家強，星球大戰找飛祥</a>
                </p>
                <P>
                    5，工藝技術，挖掘機哪家強，星球大戰找飛祥
                </P>
            </div>
        </div>

    </div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        // 選項卡------馬列維奇
        //當點選a標籤的選項卡的時候，執行下面的函式
        $('.Middle_wen_left a').click(function() {
            // 獲取點選標籤的索引
            var $index = $(this).index();
            // 高亮效果，給本標籤新增類，只顯示本標籤其他隱藏，本標籤類刪除（刪除了就沒有高亮效果了）
            $(this).addClass('text-active').siblings().removeClass('text-active');
            //本標籤獲取索引，進行展示，只顯示本標籤其他隱藏
            $('.Middle_hua').eq($index).show().siblings().hide();
        })
    </script>

</html>

css程式碼

/* 文學 */

.xue {
    background: #5e5e5e;
    margin-top: 35px;
    float: left;
    width: 500px;
    height: 200px;
    text-align: center;
}

.xue>.Middle_wen {
    margin-top: 10px;
    overflow: hidden;
    margin-left: -50px;
}

.Middle_wen_left {
    margin-left: 100px;
    float: left;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    font-size: 15px;
    background: #e6e6e6;
    border: 1px solid #e6e6e6;
    border-radius: 25px;
}


/* 高亮顏色 */

.text-active {
    color: #f2ad00
}


/* 只顯示第一個，其他隱藏 */

.Middle_hua1 .Middle_hua:not(:first-child) {
    display: none;
}


/* 馬列維奇 */

.Middle_hua {
    cursor: pointer;
}

.Middle_hua div p {
    margin-left: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    width: 86%;
    display: inline-block;
    font-size: 12px;
}

.Middle_hua div p a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    width: 75%;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

最後還有一個js檔案的引入：

jquery-3.2.1.min.js

效果圖：
在這裡插入圖片描述

純JS實現tab選項卡切換效果

今天學到的用js寫選項卡，有高亮效果，廢話不多說，直接上程式碼吧！！！注意事項：css程式碼中有一個隱藏其他div的屬性， display: none;這個一定要注意，要不然你寫的都會顯示出來 html程式碼： <!DOCTYPE html> <html la

js實現tab選項卡切換

　　通過原生js實現tab切換，首先講解一下實現的原理。　　　　1.點選按鈕首先給這個被點選的按鈕新增一個active類，給點選的改變背景色　　　　2.點選按鈕其實就是把相應的div給顯示出來。　　　　需要注意的是，點選按鈕，給按鈕添加了一個類和把對應的div給顯示，需要把上一個點選的按鈕顏色還原

原生js實現tab選項卡切換功能

本文通過兩種原生js方法實現tab選項卡切換功能 <!DOCTYPE html> <html> <head> <title>tab選項卡</title> <meta charset="utf-8"> <s

Android仿微信底部實現Tab選項卡切換效果

在網上看了比較多的關於Tab的教程，發現都很雜亂。比較多的用法是用TitlePagerTabStrip和ViewPaper。不過TitlePagerTabStrip有個很大的缺陷，Tab裡面的內容剛進去是沒有的，要滑一次才能加載出來。而且滑動的時候，Tab裡面的內容位置

【js基礎】Tab選項卡切換效果實現

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

史上最牛逼的純CSS實現tab選項卡，閃瞎你的狗眼

html檔案<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS3外觀漂亮淡入淡出Tab選單演示<

Axure實現Tab選項卡切換功能

這幾天用Axure畫原型圖的過程中，需要實現Tab選項卡切換的效果，但Axure中並沒有類似於Tab控制元件的部件，所以可以用Axure中的動態面板(Dynamic Panel)來實現

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

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

tab選項卡切換效果（一）——滑過切換和點選切換

JS程式碼如下： <script> function tabMove(){ //獲取滑鼠滑過或點選的標籤和要切換的內容分類元素 var divId01=document

Fragment實現底部選項卡切換效果

現在很多APP的樣式都是底部選項卡做為首頁的，實現這樣的效果，我們一般有這樣幾種方式，第一，最屌絲的做法，我直接自定義選項卡檢視，通過監聽選項卡檢視，邏輯控制內容頁的切換，這樣做的想法一般是反正這幾個介面基本都是常駐記憶體的，不用去關心它的快取和回收。第二種，用TabHos

Tab選項卡切換效果

tab選項卡是網頁中最常見的切換效果，常見的tab切換型別有：滑鼠滑過切換、點選切換、延遲切換、以及自動切換。html結構： <div class="notice"> <

用html+css+js實現選項卡切換效果

window.onload = function () { chang(); var myTab = document.getElementById("gameDevelopment"); //整個div var myUl = myTab.getElementsByTagName("ul")[0];//一個

vue實現選項卡切換效果

效果如下：說明：這裡我使用的原理是利用vue中的v-show/顯示隱藏指令，當為true的時候顯示，為false的時候隱藏 1html程式碼： <head> <meta charset="UTF-8"> <base target="_blan

Android用RadioGroup控制元件實現Tab選項卡效果

現在越來越多的app使用Tab選項卡的效果了，今天我們也來試試，上次我們說過用TextView控制元件來實現，但是要做選中與未選中的效果切換需要寫程式碼來實現，比較複雜，今天我們就來用RadioGroup控制元件實現，更加簡單和快捷。 RadioGroup控制元件定義如下

用angular中的ng-repeat和ng-show來實現tab選項卡

new angular lis content padding col ora ack 顯示雖然我們可以用angular中的路由來做tab選項卡，但是那會讓我們建立很多的頁面來引入，或者建立 <script type="text/ng-template" id="n

使用jq實現tab選項卡

選項卡 mov 選項 function spa color fun () dex jq代碼 $(‘#fenlei_title span‘).click(function() { $("#fenlei_title span").eq($(this).

純JS制作選項卡--JavaScript實例集錦（初學）

不用 () body tel bsp classname nload html spl 最近重新從最基礎學習JavaScript，如同蓋房，先要打好基礎，一磚一瓦都很重要。下面我來嘚吧幾句，附上從書上學到的實例與效果。 JS可以用面向過程去寫，也可以使用面向對象。面向對象

AxureRP分頁簽 / Tab選項卡切換功能~

info 雙擊加背景編輯 alt idt 拖動選項卡切換調整最終結果圖如下：實現過程： 1、從元件庫中拖一個動態面板，調整所需大小，接下來的步驟都通過雙擊動態面板來完成。 2、雙擊動態面板，彈出框“面板狀態管理”，新建狀態並命名。此處新建了TAB1、TAB2、T

js實現原生選項卡

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>開關按鈕設定</title> </head&g

原生js實現滑鼠點選切換效果

今天之所以寫一篇關於js的程式碼實現，一方面是因為個人習慣用jquery編寫程式碼，另一方面是因為github這個大平臺拋棄了jquery。 Jquery是一個js庫，極大簡化js程式設計，使用方便，相容性好，這篇文章就以一個例子來說明jq和js的編寫差別。首先我們看一下效果圖：

純JS實現tab選項卡切換效果

今天學到的用js寫選項卡，有高亮效果，廢話不多說，直接上程式碼吧！！！

相關推薦