快捷導(dǎo)航

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

更新時(shí)間：2020年05月13日 11:53:00 作者：Iceberg_710815

這篇文章主要介紹了JavaScript Tab菜單實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

Tab 選項(xiàng)卡切換效果在現(xiàn)如今的網(wǎng)頁中，運(yùn)用的也是比較多的，包括點(diǎn)擊切換、滑動(dòng)切換、延遲切換、自動(dò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>

程序的運(yùn)行效果如下：鼠標(biāo)點(diǎn)擊Tab標(biāo)簽，實(shí)現(xiàn)標(biāo)簽變色效果，下邊的內(nèi)容變成相應(yīng)的標(biāo)簽內(nèi)容．

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

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)拖拽的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)拖拽的方法,結(jié)合實(shí)例形式分析了JS拖拽的實(shí)現(xiàn)原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-12-12
ES6?class類實(shí)現(xiàn)繼承實(shí)例詳解
傳統(tǒng)的javascript中只有對(duì)象,沒有類的概念,下面這篇文章主要給大家介紹了關(guān)于ES6?class類實(shí)現(xiàn)繼承的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10
原生javascript實(shí)現(xiàn)類似vue的數(shù)據(jù)綁定功能示例【觀察者模式】
這篇文章主要介紹了原生javascript實(shí)現(xiàn)類似vue的數(shù)據(jù)綁定功能,結(jié)合實(shí)例形式分析了JavaScript基于觀察者模式實(shí)現(xiàn)類似vue的數(shù)據(jù)綁定相關(guān)操作技巧,需要的朋友可以參考下
2020-02-02
使用typeof判斷function是否存在于上下文
這篇文章主要介紹了使用typeof判斷function是否存在于上下文，在窗口加載時(shí)，使用typeof進(jìn)行判斷,需要的朋友可以參考下
2014-08-08
js給onclick事件賦值，動(dòng)態(tài)傳參數(shù)實(shí)例解說
js動(dòng)態(tài)給對(duì)象onclick事件賦值,動(dòng)態(tài)傳參數(shù)舉兩個(gè)例子一對(duì)一錯(cuò)，感興趣的朋友可以對(duì)比下，希望可以從中發(fā)現(xiàn)不一樣之處
2013-03-03
js簡(jiǎn)單的彈出框有關(guān)閉按鈕
這篇文章主要介紹了使用js做的一個(gè)簡(jiǎn)單的彈出框且有關(guān)閉按鈕,需要的朋友可以參考下
2014-05-05
javascript中sort()的用法實(shí)例分析
這篇文章主要介紹了javascript中sort()的用法,實(shí)例分析了sort()的功能、定義及使用技巧,需要的朋友可以參考下
2015-01-01
JS判斷字符串字節(jié)數(shù)并截取長(zhǎng)度的方法
這篇文章主要介紹了JS判斷字符串字節(jié)數(shù)并截取長(zhǎng)度的方法,涉及JavaScript針對(duì)頁面元素與字符串的動(dòng)態(tài)操作技巧,需要的朋友可以參考下
2016-03-03
基于打包工具Webpack進(jìn)行項(xiàng)目開發(fā)實(shí)例
這篇文章主要介紹了基于打包工具Webpack進(jìn)行項(xiàng)目開發(fā)實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
js的[defer]和[async]屬性
這篇文章主要介紹了js的<script>的[defer]和[async]屬性,需要的朋友可以參考下
2014-11-11