1. 程式人生 > >tab選項卡切換效果(一)——滑過切換和點選切換

tab選項卡切換效果(一)——滑過切換和點選切換

JS程式碼如下:

<script>
function tabMove(){
       //獲取滑鼠滑過或點選的標籤和要切換的內容分類元素
var divId01=document.getElementById('notice_tit');
       var titles=divId01.getElementsByTagName('li');
       var divId02=document.getElementById('notice_con');
       var divs=divId02.getElementsByTagName('div');
       //檢查是否對應
if (titles.length!=divs.length) return; //遍歷titles下所有的li for (var i=0;i<titles.length;i++){ titles[i].id=i; titles[i].onmouseover=function(){ //onmouseover滑鼠滑過切換,onclick滑鼠點選切換 //清除所有li上的class for (var j=0;j<titles.length;j++){ titles[j].className
=''; divs[j].style.display='none'; } //設定當前為高亮顯示 this.className='select'; //select為高亮顯示設定的CSS樣式 divs[this.id].style.display='block'; } } } window.onload=tabMove; </script>

相關推薦

tab選項切換效果——切換切換

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

vue之tab標籤切換功能

專案開發中,使用vue實現tab頁籤切換功能。具體例項如下:(1)首先定義子元件,如下圖:以select01.vue為例,子元件的原始碼如下:<template>    <div slot='select01'>{{msg}}</div> 

QML State型別,實現狀態切換,圖片切換效果

QML中所有基於Item的物件都有一個state屬性,依賴於狀態驅動的情況下,都可以用State型別的一組屬性設定: 1. 顯示一些元件而隱藏其他元件; 2. 為使用者呈現不同的動作; 3. 開始、停止或者暫停動畫; 4. 執行一些需要在新的狀態

UWP中實現大爆炸效果

ID eight 爆炸效果 foo 更新 The 選中 wid 重寫 自從老羅搞出大爆炸之後,各家安卓都內置了類似功能。UWP怎麽能落下呢,在這裏我們就一起擼一個簡單的大爆炸實現。 閑話不說,先上效果: 因為代碼太多,所以我打算寫成一個系列,下面是第一篇的正文: 首先

【Android 進階】仿抖音系列之翻頁上下滑切換視訊

最近公司在做個短視訊的專案,其中借鑑了很多抖音的設計,其中就有抖音的上下滑切換視訊。 【Android 進階】仿抖音系列之翻頁上下滑切換視訊(一) 【Android 進階】仿抖音系列之列表播放視訊(二) 【Android 進階】仿抖音系列之列表播放視訊(三)

Echarts + Web實現大屏展示效果

一、效果展示 二、資源下載 1、圖片資源下載        點選這裡 2、js+css 檔案資源下載  點選這裡 三、Demo實現 1、文件結構如下圖所示: 2、Demo.html 程式碼 <!DOCTYPE html> <html l

遊戲效果

追捕AI Vector2 offset = player.position - transform.position; if (offset.magnitude < 1.1f) { //攻擊

Unity實現UI漸變切換效果UGUI

在做揹包系統時,在提示面板中想實現的更加炫酷點,決定使用漸變效果來提示檔次 漸變效果實現採用改變該UI的透明度來控制其顯示和隱藏 在UI物件上新增Canvas Group元件 通過控制Alpha改變其透明度來控制顯示和隱藏(Alpha=0隱藏;Alpha=1顯示)(Blocks Rayc

微信小程式頂部用 scroll-view 元件橫向滾動,類似tab選項效果

<viewwx:for="{{navDate}}"class="{{curMeal===index ? 'selected-meal':'meal-time-item'}}"data-index="{{index}}"bindtap="selectMeal"data-id="{{item._id}}"&

echarts下拉列表切換資料

HTML程式碼 <select id="select"> <option value="7">第7天</option> <option value="6">第6天</option>

ArcGIS for Android Runtime100 基本操作——圖層載入切換

      之前我打算通過程式碼移植的方式來學習ArcGIS for Android Runtime100,博文地址是:http://blog.csdn.net/bit_kaki/article/details/7719648。但是覺得效果不太理想,因為這個版本的變化實在太

使用CABasicAnimation實現的動畫效果

這個動畫採用了CABasicAnimation和CAAnimationGroup來實現的,改變位置、改變大小、按鈕圓角數合在一起形成一個組合動畫。 原來是準備在CABasicAnimation中通過begintime來設定延時的效果,但效果不理想。 程式碼部分: 自定義按

AndroidStudio使用Toolbar步驟與效果

背景:從MaterialDesign開始,Android官方採用Toolbar替代了原來的ActionBar,目前Toolbar已經加入Support相容包。Toolbar是一個更加豐富,更加靈活的元件,另外它的佈局本身還是View Hierarchy的一部分,可以對Tool

CPU程式設計例項電路

1. 硬體電路 1.1. 電路框圖 關於CPU卡的基礎知識及檔案機制,請參閱相關文件,這裡不再贅述。 CPU卡一般與ESAM模組(嵌入式安全控制模組)配合使用,CPU卡的作用就不多說了。ESAM模組一般與微控制器一起焊接在電路板上。ESAM模組其實可以看做固定在電路

動畫效果-漸變動畫

第1節 概述 在安卓系統中,為了介面或者其中的元件在切換、改變的時候顯得自然生動、具有流動性的美感,就給它們添加了動畫的效果。 例如圖片切換的時候,前一張圖片淡出,後一張圖片淡入。 動畫分了三類: frame動畫(逐幀動畫)、 property動畫(屬性動

【H5 3D應用開發】 Three.js 播放json模型動畫並切換動畫

1、匯入Js模型 var loader = new THREE.JSONLoader(true); //JSONLoader構造傳入true,即showStatus=ture(顯示載入進度)

利用GDI+基於WIN32實現桌面雪花效果

前言:畢業論文寫完了,閒著沒事幹,研究研究這些一直想做的效果,先從桌面飄雪花開始,下面是過程記錄。最後給出程式碼,供大家參考。 效果圖:(桌面區域性截圖) 一、建立空WIN32工程並初始化 1、建立空WIN32工程(snow) 2、設定 專案-》屬性-》配置屬性-》MFC

CSS動畫例項:Loading載入動畫效果

      一些網站或者APP在載入新東西的時候,往往會給出一個好看有趣的Loading圖,大部分的Loading樣式都可以使用CSS3製作出來,它不僅比直接使用gif圖簡單方便,還能節省載入時間和空間。下面介紹常見的一些Loading動畫效果圖的製作方法。 1.圓環型Loadi

KBEngine warring項目源碼閱讀 項目簡介註冊登錄

urn 創建 ges input alt 接下來 F12 .com name 首先介紹下warring項目,是kbe自帶的一個演示示例,大部分人了解kbe引擎也是從warring項目開始的。 項目地址:https://github.com/kbengine/kbengine

vue系列子組件父組件

top parent sage too msg pro 工具 light java 父組件傳遞數據到子組件props 父組件 <template> <div class="main"> <div class="top">