HTML5--javascript程式碼實現Tab切換
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>javascript實現Tab切換</title> <style> *{padding:0px;margin:0px;} ul li {cursor:pointer; float:left; width:100px; height:30px; line-height:30px; text-align:center; background-color:#fff; border:1px #bbb solid; border-bottom:none; } ul li.fli {background-color:#ccc;color:red;} ul {overflow:hidden;list-style:none;} #tab_con {width:304px;height:200px;} #tab_con div{width:304px; height:200px; display:none; border:1px #bbb solid; border-top:none; text-align:center; } #tab_con div.fdiv {display:block; background-color:#ccc; } div:not(#tab_con){padding:20px 0px;color:blue;} </style> </head> <body> <ul id="tab"> <li class="fli">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div id="tab_con"> <div class="fdiv">這是清華大學的校徽<img src="images/01.jpg"></div> <div>這是浙江大學的校徽<img src="images/02.jpg"></div> <div>這是華中科大的校徽<img src="images/03.jpg"></div> </div> <script> var tabs=document.getElementById("tab").getElementsByTagName("li"); var divs=document.getElementById("tab_con").getElementsByTagName("div"); for (var i=0;i<tabs.length;i++) {tabs[i].onmouseover=function(){ change(this); }} function change(obj){ for (var i=0;i<tabs.length;i++){ if(tabs[i]==obj) {tabs[i].className="fli"; divs[i].className="fdiv"; } else { tabs[i].className=""; divs[i].className="" } } } </script>
相關推薦
HTML5--javascript程式碼實現Tab切換
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>javascrip
怎麽用JavaScript實現tab切換
代碼 www. 股神 .class 最終 ccf article cti ext 先看一下代碼實現後的最終效果: 用JavaScript實現思路很簡單,就是先把所有的內容隱藏,點擊標題對應的內容顯示, css代碼如下: <style type="text/css"
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="
原生javascript實現TAB切換
所謂TAB切換就是類似於淘寶,京東左側購物欄那種樣式。1.html:<!DOCTYPE html> <head> <meta content="text/html;charset=utf-8"> <title>tab切
Javascript 簡單的Tab切換實現
程式碼: <!DOCTYPE html> <html> <head> <title>example</title> <style type="text/css"> *{
原生JS實現tab切換--web前端開發
soft 楊冪 microsoft hidden isp 老婆 tex oct rip tab切換非常常見,應用非常廣泛,比較實用,一般來說是一個網站必不可少的一個效果。例如:https://123.sogou.com/中的一個tab部分: 1、案例源代碼 <!DO
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
HTML使用Radio Input來實現Tab切換
在開發中看見僅使用css技巧,就用HTML的Radio Input來實現的Tab的切換,連click事件都未使用。程式碼效果如下: <!DOCTYPE HTML> <html> <header> <link rel="stylesheet" href="
40行JavaScript程式碼實現的3D旋轉魔方動畫效果
JS1K是JavaScript程式設計競賽——參加競賽的規則很簡單,指令碼必須小於1K,競賽網站開始也只是為了娛樂,卻意外地收到了很多優秀的作品。 這是2016年JS1k上傳的作品,用幾十行程
30行Javascript程式碼實現圖片懶載入
小編推薦:Fundebug專注於JavaScript、微信小程式、微信小遊戲,Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務,眾多大佬公司都在使用。 前言 頁面太多圖片?那麼請你花20分鐘去優化一下頁面的效能 講道理,當你為圖片的src賦值時,D
轉:JQuery實現tab切換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab-JQ</title> <style>
android實現TAB切換附原始碼
電腦上的檔案太多了,能用的不能用的有點亂,備份上傳一下,方便自己以後查詢,其實這裡邊有些東西值得自己深入瞭解一下,工作忙也沒時間寫筆記了,哎,走的太快了 原始碼編譯執行效果如下: 工程是Android Studio的,版本是2.
vue元件實現Tab切換功能
方法一: http://www.jianshu.com/p/5757e2198304 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <ti
android實現tab切換效果
一:利用ViewPager實現Tab切換效果 1.首先新建幾個要切換的xml佈局檔案,然後在主佈局中間新增<android.support.v4.view.ViewPager>佈局,用於顯示我們寫好的xml佈局。 2.在主方法中,定新增程式碼如下:LayoutI
純css3實現tab切換問題
<style type="text/css">#tab1,#tab2,#tab3{width:200px;height:150px;position:absolute;border:2px solid #f00;border-radius:10px;line-height:150px;text-a
Android典型介面設計(4)——使用ActionBar+Fragment實現tab切換
public class TBActivity extends Activity { private ActionBar actionBar; protected void onCreate(Bundle savedInstanceState) { super.onC
純CSS實現tab切換
用單選框的:checked偽類和相鄰選擇器實現 程式碼如下: <!DOCTYPE html> <html> <head> <title></ti