欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript Tab菜單實現(xiàn)過程解析

 更新時間:2020年05月13日 11:53:00   作者:Iceberg_710815  
這篇文章主要介紹了JavaScript Tab菜單實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

Tab 選項卡切換效果在現(xiàn)如今的網(wǎng)頁中,運用的也是比較多的,包括點擊切換、滑動切換、延遲切換、自動切換等多種效果

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab</title>
  <style>
    *{
      margin: 0px;
      padding: 0px;
    }
      .current{
        background-color: darkgray;
        color: yellow;
        width: 50px;
        height: 30px;
        line-height: 30px;
        float: left;

       }
      .top{
        float: left;
        width: 50px;
        height: 30px;
        line-height: 30px;
      }
    #topMenu{
      width: 400px;
      height: 30px;
      background-color: aquamarine;
      margin-left: 400px;
      float: left;

    }
    #bottomMenu{
      clear: both;
      float: left;
      width: 400px;
      height: 400px;
      margin-left: 400px;
      background-color: chocolate;
    }
    .hide{
      display: none;
    }
    .current-content{
      color: blue;
      font-size: 50px;
    }
  </style>
  <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="topMenu">
  <div xxx="c1" class="top current" onclick="tab(this)">menu1</div>
  <div xxx="c2" class="top" onclick="tab(this)">menu2</div>
  <div xxx="c3" class="top" onclick="tab(this)">menu3</div>

</div>
<div id="bottomMenu">
  <div id="c1" class="current-content">content1</div>
  <div id="c2" class="hide">content2</div>
  <div id="c3" class="hide">content3</div>
</div>

<script>
  function tab(self){
    $(self).addClass("current");
    $(self).siblings().removeClass("current");
    var s=$(self).attr("xxx");
    $("#"+s).removeClass("hide");
    $("#"+s).addClass("current-content");
    $("#"+s).siblings().addClass("hide");
    $("#"+s).siblings().removeClass("current-content");
  }
</script>
</body>
</html>

程序的運行效果如下:鼠標(biāo)點擊Tab標(biāo)簽,實現(xiàn)標(biāo)簽變色效果,下邊的內(nèi)容變成相應(yīng)的標(biāo)簽內(nèi)容.

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • javascript實現(xiàn)消滅星星小游戲簡單版

    javascript實現(xiàn)消滅星星小游戲簡單版

    消滅星星是一款經(jīng)典的益智手游,單位里看到同事天天在手機上玩的游戲,現(xiàn)在也有web版了,出于業(yè)余愛好,自己嘗試用javascript實現(xiàn)了下,就是略簡單了點,文中給出了完整的實例代碼,大家可以自行完善??!下面來一起看看吧。
    2016-11-11
  • JavaScript判斷數(shù)字是否為質(zhì)數(shù)的方法匯總

    JavaScript判斷數(shù)字是否為質(zhì)數(shù)的方法匯總

    這篇文章主要介紹了JavaScript判斷數(shù)字是否為質(zhì)數(shù)的方法匯總的相關(guān)資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • 一文帶你搞懂面試率超高的JS事件循環(huán)

    一文帶你搞懂面試率超高的JS事件循環(huán)

    事件循環(huán)是?JavaScript?中一個非常重要的概念,下面就來看看瀏覽器和?Node.js?中的事件循環(huán)的原理,以及兩者之間的差異,感興趣的可以了解一下
    2022-10-10
  • js滾動條平滑移動示例代碼

    js滾動條平滑移動示例代碼

    這篇文章主要為大家詳細介紹了js滾動條平滑移動示例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-03-03
  • 微信小程序?qū)崿F(xiàn)點擊按鈕修改view標(biāo)簽背景顏色功能示例【附demo源碼下載】

    微信小程序?qū)崿F(xiàn)點擊按鈕修改view標(biāo)簽背景顏色功能示例【附demo源碼下載】

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點擊按鈕修改view標(biāo)簽背景顏色功能,涉及微信小程序事件響應(yīng)及數(shù)值運算實現(xiàn)動態(tài)設(shè)置view背景色樣式的相關(guān)操作技巧,需要的朋友可以參考下
    2017-12-12
  • JavaScript實現(xiàn)煙花特效(面向?qū)ο?

    JavaScript實現(xiàn)煙花特效(面向?qū)ο?

    這篇文章主要為大家詳細介紹了JavaScript使用面向?qū)ο缶幊虒崿F(xiàn)煙花特效,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • 編程語言JavaScript簡介

    編程語言JavaScript簡介

    這篇文章主要介紹了編程語言JavaScript簡介,本文講解了JavaScript是什么、JavaScript特點、JavaScript和Java的區(qū)別等內(nèi)容,需要的朋友可以參考下
    2014-10-10
  • JS中JSON對象和String之間的互轉(zhuǎn)及處理技巧

    JS中JSON對象和String之間的互轉(zhuǎn)及處理技巧

    JSON:JavaScript 對象表示法(JavaScript Object Notation),其實JSON就是一個JavaScript的對象(Object)而已。接下來通過本文給大家介紹JS中JSON對象和String之間的互轉(zhuǎn)及處理技巧,需要的朋友一起學(xué)習(xí)吧
    2016-04-04
  • layui使用templet格式化表格數(shù)據(jù)的方法

    layui使用templet格式化表格數(shù)據(jù)的方法

    今天小編就為大家分享一篇layui使用templet格式化表格數(shù)據(jù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • Javascript中的高階函數(shù)介紹

    Javascript中的高階函數(shù)介紹

    這篇文章主要介紹了Javascript中的高階函數(shù)介紹,本文講解了什么是高階函數(shù)、Javascript的高階函數(shù)、還原高階函數(shù)、高階函數(shù)使用實例等內(nèi)容,需要的朋友可以參考下
    2015-03-03

最新評論