js 選項卡

阿新 • • 發佈：2018-12-19

//css樣式設定

<style type="text/css"> #div1 .action{ background: yellow; } #div1 div{ width: 200px; height:200px; border: solid 1px grey; display: none; } </style>

//js部分 <script type="text/javascript"> window.onload=function() { var odiv=document.getElementById('div1'); //獲取id=div1的div元素； var obn=odiv.getElementsByTagName('input'); //獲取div中input； var odiv1=odiv.getElementsByTagName('div'); //獲取div中的子類div；

for (var i=0;i<obn.length;i++) { obn[i].index=i; // 給每個按鈕加上一個編號； obn[i].onclick=function() { for(var i=0;i<obn.length;i++) { obn[i].className=''; //讓每個按鈕的class為空；

odiv1[i].style.display=''; //讓每個子類div的display為空； } this.className='action'; //this表示點選當前按鈕； odiv1[this.index].style.display='block'; //點選當前按鈕彈出當前DIV的index； odiv1[this.index].className='action'; }; } }; </script>

//網頁顯示部分

<body> <div id="div1"> <input type="button" class="action" value="教育" /> <input type="button" value="培訓" /> <input type="button" value="招生" /> <input type="button" value="出國" /> <div >111</div> <div >222</div> <div >333</div> <div >444</div> </div> </body>

js選項卡

width har bottom 加載 pointer ott ava ntb body <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &

js選項卡及評星

類名 class ddc DC col RR his dcl 不同的選項卡： .active_tab{ color:#f00; border:1px solid #f00; } <ul> <li>我是1</l

js選項卡功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js選項卡功能</title> <style>

js 選項卡

//css樣式設定 <style type="text/css"> #div1 .action{ background: yellow; }

js選項卡程式碼詳解

** js選項卡 ** <body> <input type="button" name="" id="btn1" value="選項一" style="background-color: yellow;"/> <input type="b

vue.js 選項卡切換對img設定不同的圖片

<img id="img_shared" :src="shared" style="margin-left: 25px;" > 給img標籤設定src 引入兩張圖片選項卡切換的時候設定不同的圖片 import shared_nor from '..

HTML5+CSS3+JS 選項卡切換

先上效果圖： 1、html頁面: <!DOCTYPE html> <html><head><meta charset="utf-8" /><title>Tab切換</title><link re

js選項卡簡單切換

<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-

js自己定義插件-選項卡

.net char 例如 die 對象 tails gree eth end 該功能比較簡單。鞏固一下jquery插件寫法，註意引入的jquery.js 、自己定義插件路徑代碼例如以下：頁面： <!doctype html> <html>

【easyui】關於tabs的選項卡的href 引入頁面後 js、css失效

bsp window tab esp servle edi href eas let 示例： $("tabs").tabs("add",{ 　　href:”test.html“ }) test.html 只有body裏的內容會被執行如果js或css在body外則會失

js原生實現選項卡功能

doc pre pan element gre rip class isp height 結構：<div id="box"> 　　<input type="button" value="書籍" class="on"> 　　<in

js學習總結----經典小案例之選項卡

scrip ges div 視頻內容 mil line 學習總結 images ul li <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

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常用特效——選項卡效果

weight ont pad absolut cursor asc spa cto clear 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset

JS之選項卡-仿網易新聞

com selected ons utf-8 put adding mouse ext 網易 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8">

原生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

原生js實現選項卡

index 定義 mar 事件綁定 click right get elements ext html代碼： <div class="tab"> <ul> <li class="selected">圖片</li&

原生js三種選項卡效果（輪播）

col val 還在 log pla absolut 自動播放 div pac 第三種：定時輪播切換（我這邊定時是2s） <!DOCTYPE html> <html> <head> <meta charset="utf-8"