tab選項卡簡易程式碼

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>tab選項卡程式碼</title>
		<style type="text/css">
			
			.title {
				width: 500px;
				height: 50px;
				color: black;
				border: 1px solid gray;
				margin: 0;
				display: flex;
			}
			
			.title span {
				width: 80px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				float: left;
				font-family: "微軟雅黑";
				font-size: 24px;
				flex: 1;
				border-right: 1px solid black;
			}
			.title span:nth-child(3){
				border-right: none;
			}
			.tab {
				color: red;
				background-color: #999;
				cursor: pointer;
			}

			#tab>div {
				width: 500px;
				height: 200px;
				border: 1px solid gray;
				display: none;
				text-align: center;
				line-height: 200px;
				font-family: "微軟雅黑";
				font-size: 24px;
			}
			
			#tab .content {
				display: block;
			}
		</style>
	</head>

	<body>
		<div id="tab">
			<h2 class="title">
				<span class="tab" onmouseover="changeTab(this)">選項一</span>
				<span onmouseover="changeTab(this)">選項二</span>
				<span onmouseover="changeTab(this)">選項三</span>
			</h2>
			<div class="content" style="background: greenyellow;">內容一</div>
			<div style="background: cyan;">內容二</div>
			<div style="background: goldenrod;">內容三</div>
		</div>
	</body>

</html>
<script type="text/javascript">
	// 獲取所有的span標籤組
	var tabs = document.getElementById("tab").getElementsByTagName("span");
	// 獲取所有的div標籤組
	var cts = document.getElementById("tab").getElementsByTagName("div");

	function changeTab(current) {
		for(i = 0; i < tabs.length; i++) {
			if(tabs[i] == current) {
				tabs[i].className = "tab";
				cts[i].className = "content";
			} else {
				tabs[i].className = "";
				cts[i].className = "";
			}
		}
	}
</script>

tab選項卡簡易程式碼

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tab選項卡程式碼</title> <style type="

自創簡易CSS Tab 選項卡

選中 dem top ive load fun .cn click 綜合前段時間我註冊了 w3c.run域名，打算做一個W3C相關技術在線試驗工具。沒錯，就是在線編寫html、css、js代碼然後在線運行，查看效果。在設計首頁時，我打算首頁提供三個代碼編輯器，介於界面大

DOM操作相關案例模態對話框,簡易留言板,js模擬選擇器hover,tab選項卡,購物車案例

order 選擇器點擊 ttr 選擇 this 鼠標懸停 pos 清空 1.模態框案例需求：打開網頁時有一個普通的按鈕，點擊當前按鈕顯示一個背景圖，中心並彈出一個彈出框，點擊X的時候會關閉當前的模態框代碼如下： <!DOCTYPE html> &l

css3圓角tab選項卡程式碼

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery+css3圓角

用angular中的ng-repeat和ng-show來實現tab選項卡

new angular lis content padding col ora ack 顯示雖然我們可以用angular中的路由來做tab選項卡，但是那會讓我們建立很多的頁面來引入，或者建立 <script type="text/ng-template" id="n

原生JS畫的tab選項卡

記錄 bsp back height 原生js .class lis get function 記錄一下原生js寫的tab選項卡鼠標滑入可以切換圖片離開之後自動切換 <!DOCTYPE html> <html lang="en"> &l

Tab選項卡自動切換效果js實現

one asc hidden abs 公告 turn get 實現 pla try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

Tab選項卡延遲切換效果js實現

ext 0ms 分享規則 .get 內容 char out try try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t

一個頁面多個tab選項卡效果

結果菜鳥提升 ref -a 搜索引擎 flow .cn www. 新整理同一個頁面多個tab選項卡，由於不會自己些代碼，只能從網上找現成的來改。留著備用。共3部分，HTML、CSS、JS 暫時沒有演示地址和下載地址，以後會補上。 HTML部分 <!DOCTY

使用jq實現tab選項卡

選項卡 mov 選項 function spa color fun () dex jq代碼 $(‘#fenlei_title span‘).click(function() { $("#fenlei_title span").eq($(this).

tab選項卡動態滑動效果

ref nav css引入選項 important script 滑動效果 tab選項卡 port css引入:style.css 樣式可自己更改 html 結果和class： <div class="navBar"> <ul

layui 的Tab選項卡

申請 www. yui TE http bbr -s pre clas http://www.layui.com/doc/element/tab.html <#--start--> <div class="layui-tab layui-tab-

AxureRP分頁簽 / Tab選項卡切換功能~

info 雙擊加背景編輯 alt idt 拖動選項卡切換調整最終結果圖如下：實現過程： 1、從元件庫中拖一個動態面板，調整所需大小，接下來的步驟都通過雙擊動態面板來完成。 2、雙擊動態面板，彈出框“面板狀態管理”，新建狀態並命名。此處新建了TAB1、TAB2、T

vue tab選項卡

border ear cti cdn none box line use port <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

Tab選項卡

message mes 分享 present data tab選項卡選項 ria tin <div> <ul class="nav nav-tabs" role="tablist"> <li role="presentation"

layui從子iframe打開父iframe的tab選項卡

link script frame manage ++ name 父iframe jquer con 數據表格字段： {field: ‘novelId‘, title: ‘小說ID‘,width:100,templet: ‘<div><a href="ja

JavaScript插件制作-tab選項卡

++ doctype 500px clear win remove 制作 getattr hover JavaScript插件制作練習-鼠標劃過選項卡切換圖片 <!DOCTYPE html> <html> <head>

Axure RP7.0製作Tab選項卡

1.建立一個命名為Tab的動態面板，新增兩個state 2.在state1中新增如下圖元件，並且在“新聞資訊”的按鈕上新增事件，設定動態面板狀態為state2。為了區分，將按鈕樣式要設定不一樣。 3.在state2中新增如下圖元件，並且在“最新公告”的按鈕上新增事件，設

layui學習--tab選項卡

var element; var $; layui.use(['element','jquery'],function(){ element = layui.element, $ = layui.jquery; //監聽左側選單點選 element.on(

微信小程式-滾動Tab選項卡

前言：今天呢給大家詳細講解一下滾動Tab選項卡：左右可滑動切換的效果，希望對大家做專案時候有用！以前也遇到過這個，但是沒有做記錄。轉載來源於：https://www.jianshu.com/p/94849f9c2ff2 一、wxml結構 tab標題因一排八個，所以使用 scroll

tab選項卡簡易程式碼

相關推薦