2. 程式人生 > >京東輪播：選項卡里套選項卡

京東輪播：選項卡里套選項卡

阿新 • • 發佈：2019-01-15
window.onload = function () { var tab = document.getElementById('tab'); var title = tab.getElementsByClassName('title')[0]; var titleLi = title.getElementsByTagName('li'); var main = tab.getElementsByClassName('main')[0]; var img = main.getElementsByTagName('img')[0]; var ul = main.getElementsByTagName('ul'
)[0]; var subtitleLi = ul.getElementsByTagName('li'); var arr = [ { title : '最熱團購', subtitle : ['最熱團購1','最熱團購2','最熱團購3'], pic : [ 'img/tab/1-1.png', 'img/tab/1-2.png', 'img/tab/1-3.png' ] }, { title : '商城特惠'
, subtitle : ['商城特惠1','商城特惠2','商城特惠3','商城特惠4'], pic : [ 'img/tab/2-1.png', 'img/tab/2-2.png', 'img/tab/2-3.png', 'img/tab/2-4.png' ] }, { title : '名品推薦', subtitle : ['名品推薦1'
,'名品推薦2','名品推薦3','名品推薦4','名品推薦5'], pic : [ 'img/tab/3-1.png', 'img/tab/3-2.png', 'img/tab/3-3.png', 'img/tab/3-4.png', 'img/tab/3-5.png' ] }, { title : '繽紛活動', subtitle : ['繽紛活動1','繽紛活動2','繽紛活動3','繽紛活動4'], pic : [ 'img/tab/4-1.png', 'img/tab/4-2.png', 'img/tab/4-3.png', 'img/tab/4-3.png', ] } ]; // 初始化 for ( var i = 0; i < arr.length; i++ ) { // 大選項卡的標題 var oLi = document.createElement('li'); oLi.innerHTML = arr[i].title; oLi.index = i; oLi.onclick = function () { highlight(this); ul.innerHTML = ''; changeTab(this.index); } title.appendChild(oLi); } changeTab(0); function changeTab(num) { // 大選項卡的內容 img.src = arr[num].pic[1]; // 小標題 for ( var j = 0; j < arr[num].subtitle.length; j++ ) { oLi = document.createElement('li'); oLi.innerHTML = arr[num].subtitle[j]; oLi.style.width = Math.floor(parseInt(800 / arr[num].subtitle.length) - 2) + 'px'; oLi.index = j; oLi.onclick = function () { highlight(this); this.parentNode.previousElementSibling.src = arr[num].pic[this.index]; } ul.appendChild(oLi); } } function highlight (ele) { var aLi = ele.parentNode.children; for ( var i = 0; i < aLi.length; i++ ){ aLi[i].className = ''; } ele.className = 'active'; } }

相關推薦

京東輪播：選項卡里套選項卡

window.onload = function () { var tab = document.getElementById('tab'); var title = tab.getElementsByClassName('title')[0]; var titleLi = titl

Javascript 京東輪播圖

height line tran click doc nload eight cti dex <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

京東輪播圖的空心圓做法

 思路就是，兩個盒子， 裡面的盒子的邊框設大一些， 用以設定不處於啟用狀態的圓，此時的外面盒子的背景不設定，也就是透明的。當處於啟用狀態時， 裡面的盒子背景和邊框都設為白色， 外邊框的背景設為有透明度的背景。 <!DOCTYPE html> <ht

仿京東輪播圖詳解版jQuery

$(function () { var index = 0;//用index記錄下標,預設為0 var lis = $('.slider li'); //1.右邊箭頭點選事件 $('.arrow-right').click(right);

京東輪播圖

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

swiper autoheight選項卡嵌套出現空白問題

swiper的autoheight設定可以用來解決tab切換時內容高度不一致而出現的空白問題。今天做專案時，出現了另外的問題，所以整理記錄下。 我的問題是這樣的：用swiper3.1製作了一個tab選項卡（就叫swiper選項卡吧，設定了autoheight），裡面又嵌套了

JS基礎—選項卡套選項卡(函式傳參)

CSS部分： body,ul{margin:0; padding:0;} .clearfix{zoom:1;} .clearfix:after{display:block; content:""; clear:both; height: 0; overflow: hi

介紹下京東的（選項卡中的選項卡）是怎麽實現的

pad b- cti pre set red 二維數組 node int 我們都誰知道選項卡是通過數組實現的，那麽選項卡中的選項卡無非就是一個二維數組。 道理邏輯很簡單，下面是我實現的一個方法： 1 <!DOCTYPE html> 2 <html

問題：combo只顯示一個選項，其他不顯示（調整框的高度即可。）

== .com idc 普通 內容 重新 運行 padding href 解決辦法：調整框的高度即可。 轉自：http://blog.163.com/strive_only/blog/static/89380168200971010114665/ 雖然我也是用了好一段VC的

應試教育：你是在“套題”還是在“解決問題”？

hat strong http 枯燥 必須 混亂 hle 特點 .html ?為什麽當初會采用“背題型”的方式？ ?“背題型”的局限性在哪？ ?建構“知識體系”優勢在哪？ ?“題海戰術”的認知錯誤 ?學習和考試的本質 聲明：此文純屬個人學習方法總結。 1.為什麽當初會采用

讓我為你介紹一個神器：Chimee，一套可擴展的 H5 視頻播放器解決方案

包括 api 人員 保持 打包 需求 解耦 日常 開發 Chimee（讀“奇米”, [t??‘m?:]）是由奇舞團開源的一套 H5 視頻播放器解決方案，由奇舞團視頻雲前端團隊結合在業務和視頻編解碼方向的沈澱積累傾心打造。 Chimee 支持 MP4、M3U8、FLV 等

智能解析：白條怎麽套現，自己京東白條怎麽套現出來

智能家具 寂寞 不可 市場 階段 物聯 技術分享 但是 智能家居 過去人們出門，要帶“身手鑰錢”，即身份證、手機、鑰匙和錢包。而現在，身份證和錢包的功能被放進了手機，那麽接下來鑰匙會有哪些變化？西安慧晶智能科技有限公司董事長張寶強說，2018年將會是智能鎖具爆發的元年，以

案例：python列表嵌套字典實現備忘錄

python1.使用字典和列表嵌套結構表示多條記錄2.添加信息時，直接輸入一句話，進行解析拆解，記錄時間與事件3.不同信息采用不同顏色輸出 #!/user/bin/env Python # _*_ coding:utf-8 _*_ # 51memo.py # author:大寶dayday見 __autho

Python之路(第三十一篇) 網路程式設計：簡單的tcp套接字通訊、粘包現象

  一、簡單的tcp套接字通訊 套接字通訊的一般流程 服務端 server = socket() #建立伺服器套接字 server.bind() #把地址繫結到套接字,網路地址加埠 server.listen() #監聽連結 inf_loop:

python+selenium七：下拉框、選項框、select用法 python+selenium七：下拉框、選項框、select用法

python+selenium七：下拉框、選項框、select用法   from selenium import webdriverfrom selenium.webdriver.common.action_chains import ActionChainsimpo

react-virtualized：解決react渲染長列表卡死的問題

問題：因為公司的業務需要，一個頁面需要展示1000條資料，用antd去渲染的話會造成頁面卡死。 解決辦法：react-virtualized來替代antd的table。 react-virtualized:https://github.com/bvaughn/react-virtualized/blob/

SSM 生成mapper中xml文件：未能解析映射資源：“文件嵌套異常

file except cat info lse tin 未能 builder pan 錯誤日記我就網上隨便找個貼著: 錯誤一: org.springframework.beans.factory.BeanCreationException: Error creating

BI專案記（二）：給我接套資料

這次故事的主角還是小D，小D工作在一家傳統公司的資訊部門，負責資料倉庫系統的運維和開發。 話說有一天，小D被教導老闆的office，老闆給佈置了一個任務，讓小D在現有資料倉庫裡接入剛上線的兩個系統的資料。 於是小D找到了對應系統的開發團隊。可能是對方剛上線的緣故，最終也沒有人搭理小D，於是直接把資料庫只讀

Android直播入門實踐：動手搭建一套簡單的直播系統

轉載自：http://www.52im.net/thread-1154-1-1.html 1、前言 實時視訊直播是這兩年非常火的技術形態，已經滲透到教育、線上互娛等各種業務場景中。但要搭建一套實時視訊直播系統，並非易事，當然相關的直播技術理論在論壇的其它文章裡已經寫的非常詳細，本文不再展開。

簡單的js圖片輪播：

1.html程式碼： <div class="wrap"> <div class="mySlides fade"> <div class="numbertext">1 / 4</div>