小案例：實現選單欄的切換，點選左側邊欄，展示右側主體的頁面
首先實現html頁面的編寫：
<div
id="header"
>
div>
<
div
id="main"
>
<
div
class
="affix"
>
<
h4>使用者中心
h4>
<
ul>
<
li><
a href
="#container-myorder"
>我的訂單
a>
li>
<
li><
a href
="#container-buy-stat-canvas"
>消費統計（canvas版）
a>
li>
<
li><
a href
="#container-buy-stat-svg"
>消費統計（svg版）
a>
li>
<
li><
a href
="#container-luck-lottery"
>幸運**
a>
li>
ul>
div>
<
div
class
="right-body"
>
<
div
class
="active"
id="container-myorder"
>我的訂單
div>
<
div
id="container-buy-stat-canvas"
>消費統計（canvas）
div>
<
div
id="container-buy-stat-svg"
>消費統計（svg）
div>
<
div
id="container-luck-lottery"
>幸運**
div>
div>
div>
<
div
id="footer"
>
div>
其次是css效果實現：
#main .affix .affix h4 .affix ul li.affix ul li.active a#main .right-body #main .right-body > div #main .right-body > div.active
最後一步運用簡單的js實現點選左側邊欄選項，展示右側主體區域：
$('.affix ul li a').click(function
(e));
綜上乙個簡單的選單切換就實現了。
JS實現級聯選單
是首先應該新增兩個下拉列表並設定id屬性來方便操作 1 select id country 2 option 國家 option 3select 4 select id city 5 option 城市 option 6select js 中首先需要宣告國家和城市兩個陣列 var country 中...
原聲JS仿京東編寫Tab切換選單
使用js原生實現tab切換選單 排他思想及自定義屬性 具體 如下 html結構 cur class class menu 首頁li 列表1li 列表2li 列表3li ul div class cont class item 首頁內容div class item 列表1內容div class ite...
原生js實現tab切換
lang en charset utf 8 tab切換title box head list input active style head id box id head list button value 選單一 class active type button value 選單二 type bu...