原生js、jq切換選項卡
<!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