原生js、jq切換選項卡

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	ul,li{
		list-style: none;
	}
	ul{
		height: 60px;
	}
	ul li{
		width: 100px;
		height: 50px;
		text-align: center;
		line-height: 50px;
		background: gray;
		color: #000;
		float: left;
		margin-left: 1px;
	}
	ul li.active{
		background: red;
		color: #fff;
	}
	.box{
		width: 400px;
		height: 200px;
		border: 1px solid black;
		background: pink;
		display: none;
	}
	.box:nth-of-type(2){
		background: yellow;
	}
</style>
<body>
	<ul>
		<li class="active">div1</li>
		<li>div2</li>
	</ul>
	<div class="box" style="display:block">111111</div>
	<div class="box">222222</div>
	<script type="text/javascript">
	js:
		var oLi = document.getElementsByTagName('li');
	     // var oDiv = document.getElementsByTagName('div');
		var oDiv = document.getElementsByClassName('box');
		for (var i = 0; i < oLi.length; i++) {
			oLi[i].index = i;
			oLi[i].onmouseover = function(){
				for (var i = 0; i < oLi.length; i++) {
					oLi[i].className = '';
					oDiv[i].style.display = 'none';
				}
				 	this.className = 'active';
				 	oDiv[this.index].style.display = 'block';
			}
		};

		/*Let:          
		for(let i=0;i<oLi.length;i++){
			// oLi[i].index = i;
			oLi[i].onclick = function(){
				for(var j=0;j<oLi.length;j++){
					oLi[j].className = '';
					aCon[j].style.display = 'none';
				}
				this.className = 'active';
				aCon[i].style.display = 'block';
			}
		}
	};	

	jq:
		$(function(){
		$('ul li').each(function(i,v){
			$(v).click(function(){	
			var i = $(v).index();//就是下標，不用定義。i = $(v).index(),只能適用於下標數量相同的兩種元素		
				$(v).addClass('active').siblings().removeClass('active');
				 $('.box').css('display','none');
				$('.box').eq(i).css('display','block'); //css 換成.hide 或者 .show更好
			})
		})
	});*/

	</script>
</body>
</html>

原生js、jq切換選項卡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head>

原生js、jQuery實現選項卡功能

lap span size open absolute index http jquery html 在大家在網上平常瀏覽網頁的時候，想必各位都會看到選項卡功能，在這裏給大家詳解一下用原生js、jQuery如何來寫一些基本的選項卡話不多說，先給各位看一下功能圖：

原生JS畫的tab選項卡

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

原生js面向物件程式設計-選項卡(自動輪播)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生js面向物件程式設計-選項卡(自動輪播)</title> <

tab切換選項卡（原生/jQ/vue）實現方式

<!DOCTYPE > <html> <meta http-equiv="Content-Type" content="text/html; charset=utf

切換選項卡+js+css+html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

【js基礎】Tab選項卡切換效果實現

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

JS 、JQ 獲取寬高總結

bsp image 技術獲取 cnblogs 技術分享 src 寬高 png JS 、JQ 獲取寬高總結

JS實例之選項卡效果，實現點擊對應的顯示效果

http body auto 100% itl elements lis style char 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

原生JS實現tab切換--web前端開發

soft 楊冪 microsoft hidden isp 老婆 tex oct rip tab切換非常常見，應用非常廣泛，比較實用，一般來說是一個網站必不可少的一個效果。例如：https://123.sogou.com/中的一個tab部分： 1、案例源代碼 <!DO

【整理】原生js和jQ獲取窗口寬高及滾動條的方法和函數

javascript 滾動條 jq 窗口距離原生js和jQ獲取窗口寬高及滾動條的方法和函數一。原生js獲取 1.實際寬高（不包括工具欄，滾動條的視口高度，ie6.7.8不支持） window.innerHeight window.innerWidth 2.顯示屏寬高 screen.h

js、jq獲取屏幕的寬度和高度

scrollto adding scroll jquery java add query bsp javascrip Javascript: 網頁可見區域寬： document.body.clientWidth 網頁可見區域高： document.body.client

小程序之 tab切換(選項卡)

swipe -i per func col cti XML align 簡單好久沒有寫東西了今天寫一個簡單的東西小程序tab切換（選項卡功能） .wxml <view class="swiper-tab"> <view class="

js、jq和標籤裡面設定按鈕可點選與不可點選狀態

<button id="bt1" type="button">button</button> 1、js中設定按鈕可點選與不可點選，預設是可點選的 (1)設定按鈕不可點選 document.getElementById("bt1").disabled=ture;

jq實現選項卡

實現效果： <ul class="t-ul"> <li class="active">吃飯</li> <li>睡覺</li> <li>打豆豆</li> </ul>

原生JS和JQ實現div的展開與收齊動畫

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>展開收起</title> <style> * {

JS、JQ判斷時間大小

JQ判斷 <!DOCTYPE> <html> <head> <title></title> <meta http-equiv="X-UA-Compatible" charset="utf-8"/&g

純CSS、原生JS、jQuery實現下拉選單功能

一、純CSS實現實現下拉選單需要用display，即改變display的block或none值。先構建基本的HTML框架， <div id="nav"> <ul> <li><a href="#">

新增、刪除、替換、插入到某個節點的方法（js、jq）

首先說下，具體用得到的方法： js： appendChild() //新增 removeChild() //刪除節點 insertBefore（插入節點，被插節點） //插入（前插後） replaceChild（新節點,舊節點） //替換（前替換後） jq： a

input與textarea實時監控，原生JS與JQ兩種方法

之前一直在用JQ的方法對input與textarea輸入實時監控，今天在偶然下發現了原生JS的方法對input的實時監控。廢話不多說了，直接上程式碼。 HTML程式碼： <!DOCTY

原生js、jq切換選項卡

相關推薦