HTML5--javascript程式碼實現Tab切換

阿新 • • 發佈：2019-01-15

這裡寫圖片描述

<!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切換問題

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

HTML5--javascript程式碼實現Tab切換

相關推薦