jq淘寶左側tab簡單切換效果
阿新 • • 發佈：2018-11-14
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="../css/%e5%9e%82%e7%9b%b4tab%e5%88%87%e6%8d%a2.css" rel="stylesheet" /> <script src="../js/jquery-3.3.1.min.js"></script> <script src="../js/%e5%9e%82%e7%9b%b4tab%e5%88%87%e6%8d%a2.js"></script> </head> <body> <div class="tab"> <div class="top"><h3>商品服務分類</h3></div> <div class="box"> <ul class="menus"> <li>服裝內衣</li> <li>鞋包配飾</li> <li>運動戶外</li> <li>珠寶手錶</li> <li>手機數碼</li> <li>家電辦公</li> <li>護膚彩妝</li> <li>鞋包配飾</li> <li>運動戶外</li> <li>珠寶手錶</li> <li>手機數碼</li> <li>運動戶外</li> <li>珠寶手錶</li> </ul> <div class="right"> <div class="scroll"> <div class="tab_right"> <div class="hiden-box"> <a href="#">淘寶女人1</a> <a href="#">最in女裝</a> <a href="#">淘寶男人</a> <a href="#">女人搭配</a> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> </div> </div> <div class="tab_right"> <div class="hiden-box"> <a href="#">淘寶女人2</a> <a href="#">最in女裝</a> <a href="#">淘寶男人</a> <a href="#">女人搭配</a> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> </div> </div> <div class="tab_right"> <div class="hiden-box"> <a href="#">淘寶女人3</a> <a href="#">最in女裝</a> <a href="#">淘寶男人</a> <a href="#">女人搭配</a> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> </div> </div> <div class="tab_right"> <div class="hiden-box"> <a href="#">淘寶女人4</a> <a href="#">最in女裝</a> <a href="#">淘寶男人</a> <a href="#">女人搭配</a> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> </div> </div> <div class="tab_right"> <div class="hiden-box"> <a href="#">淘寶女人5</a> <a href="#">最in女裝</a> <a href="#">淘寶男人</a> <a href="#">女人搭配</a> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> </div> </div> <div class="tab_right"> <div class="hiden-box"> <a href="#">淘寶女人6</a> <a href="#">最in女裝</a> <a href="#">淘寶男人</a> <a href="#">女人搭配</a> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> </div> </div> <div class="tab_right"> <div class="hiden-box"> <a href="#">淘寶女人7</a> <a href="#">最in女裝</a> <a href="#">淘寶男人</a> <a href="#">女人搭配</a> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> </div> </div> <div class="tab_right"> <div class="hiden-box"> <a href="#">淘寶女人8</a> <a href="#">最in女裝</a> <a href="#">淘寶男人</a> <a href="#">女人搭配</a> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> </div> </div> <div class="tab_right"> <div class="hiden-box"> <a href="#">淘寶女人9</a> <a href="#">最in女裝</a> <a href="#">淘寶男人</a> <a href="#">女人搭配</a> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> </div> </div> <div class="tab_right"> <div class="hiden-box"> <a href="#">淘寶女人10</a> <a href="#">最in女裝</a> <a href="#">淘寶男人</a> <a href="#">女人搭配</a> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> </div> </div> <div class="tab_right"> <div class="hiden-box"> <a href="#">淘寶女人11</a> <a href="#">最in女裝</a> <a href="#">淘寶男人</a> <a href="#">女人搭配</a> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> </div> </div> <div class="tab_right"> <div class="hiden-box"> <a href="#">淘寶女人12</a> <a href="#">最in女裝</a> <a href="#">淘寶男人</a> <a href="#">女人搭配</a> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> </div> </div> <div class="tab_right"> <div class="hiden-box"> <a href="#">淘寶女人13</a> <a href="#">最in女裝</a> <a href="#">淘寶男人</a> <a href="#">女人搭配</a> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> <div class="hiden-title"> <h1>印記女裝</h1> <span class="a-box"> <a href="#">連衣裙</a><span>|</span> <a href="#">褲子</a><span>|</span> <a href="#">小西裝</a><span>|</span> <a href="#">長袖村上</a><span>|</span> <a href="#" class="orange">春季外套</a> <a href="#">鄭志山</a><span>|</span> <a href="#">毛衣</a><span>|</span> <a href="#">長袖T恤</a><span>|</span> <a href="#">唯一</a><span>|</span> <a href="#">雪絨錢</a><span>|</span> <a href="#">大地虧</a> <a href="#">半身全</a><span>|</span> <a href="#">風衣</a><span>|</span> <a href="#">類似雪紡</a><span>|</span> <a href="#">毛衣外套</a><span>|</span> <a href="#">棒球服</a> <a href="#">牛仔裝</a><span>|</span> <a href="#">禮服</a><span>|</span> <a href="#">婚紗</a><span>|</span> <a href="#">大媽</a><span>|</span> <a href="#">Zara</a><span>|</span> <a href="#">挨個</a> </span> </div> </div> </div> </div> </div> </div> </div> </body> </html>
* { margin: 0; padding: 0; } ul { list-style: none; } a{ text-decoration:none; font-size:14px; } .tab { width:688px; height:435px; margin:50px; position:relative; } .tab .top{ width:142px; height:30px; color:#fff; text-align: center; line-height: 30px; border:1px solid rgb(92,94,103); border-bottom:none; background-color:#ff6a00; } .tab .box .menus { width: 142px; height: 402px; background-color:#fff; border:1px solid #808080; } .tab .box .menus li { width:142px; height:30px; font-size:16px; color: rgb(92,94,103); text-align: center; line-height: 30px; border-bottom:1px solid rgb(92,94,103); } .tab .box .bg { background: rgb(0,159,233) !important; transition: all 2s; -webkit-transition: all 2s; } .tab .right { width:526px; height:434px; overflow:hidden; margin-left:10px; position:absolute; left:146px; top:0; display:none; } .tab .tab_right .hiden-box { width:522px; height:430px; border:2px solid #ff0000; border-bottom:none; } .tab .tab_right:nth-child(13){ border-bottom:2px solid #ff0000; }
只是實現了簡單的tab切換效果，右側hiden-box中的內容、樣式可以根據所需進行修改。$(function () { $('.tab .menus li').each(function () { $('.tab .menus li').mouseover(function () { $('.tab .menus li').removeClass('bg'); $(this).addClass('bg'); $(this).parent().parent().find(".right").show(); var i = $(this).index(); $('.tab .scroll').css('margin-top', -i * 432 + 'px'); }); $('.box').mouseleave(function () { $(this).find(".menus li").removeClass('bg'); $(this).find(".right").hide(); }); }); });
睡覺啦 啊啊啊