Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

Kleiner, von jquery_jquery implementierter Tab-Wechseleffekt in der seitlichen Navigation

WBOY
Freigeben： 2016-05-16 15:43:18
Original
1422 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den von jquery implementierten Tmall-ähnlichen Tab-Wechseleffekt in der Seitennavigation. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist eine Demonstration, wie JQuery den Tmall-Tab-Wechseleffekt in der Seitennavigation nachahmen und externes JS einführen kann. Wenn beim ersten Durchlauf Fehler auftreten, aktualisieren Sie bitte die Seite. Dieses Menü ist dem Tmall-Mall-Menü nachempfunden. Es ist ein großes Div-Menü, das eine große Anzahl von Produktkategorien unterstützt. Es ist ein großes, elegantes und praktisches Webmenü mit mehreren Kategorien.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-ftmail-nav-tab-cha-codes/

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿天猫侧导航-tab切换</title>
<style>
body, div, dl, dt, dd, ul, ol, li,h1, h2, h3, h4, h5, h6, pre, code,form, fieldset, legend, input, button,textarea, p, blockquote, th, td,select {margin: 0;padding: 0;}
fieldset, img {border: 0 none;}
img {vertical-align: top;}
:focus {outline: 0;}
address, caption, cite, code, dfn, em, strong, th, var, optgroup {font-style: normal; font-weight: normal;}
/*重置标题为body正常字体大小，需要时可另行设置*/
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;}
abbr, acronym {border: 0;font-variant: normal;}
/*表单元素样式不会自动继承body样式，所以要设置其继承body的样式，或者像最后一行设置也可以*/
input, button, textarea,select, optgroup, option {font-family: arial;font-size: inherit;font-style: inherit; font-weight: inherit;}
code, kbd, samp, tt {font-size: 100%;}
input, button, textarea, select {*font-size: 100%; font-style: normal; font-variant: normal;}
ol, ul {list-style: none;}
input,select,label{vertical-align:middle}
table {border-collapse: collapse; border-spacing: 0;}
caption, th {text-align: left;}
sup {vertical-align: text-top;}
sub {vertical-align: text-bottom;}
body{font:12px/1.5 Arial,Helvetica,sans-serif; _font-family:"SimSun";}
/*IE处于混杂模式时，body以窗口为高度参照，body设置为100%就可以使得页面和窗口一样高；
处于标准模式时，body以html标签为高度参照，html以窗口为高度参照，所以html要设置100%，body高度才会100%占满整个浏览器窗口*/
html, body {
 height: 100%;
 background: #FFF;
}
body {font: 12px/1.5 tahoma,arial,"宋体";}
h2 {font-size: 14px;}
h3 {font-size: 12px;}
a {
 color: #fff;
 text-decoration: none;
}
.sidebar {
 margin: 40px auto 0;
 width: 400px;
}
/* 切换导航样式 */
.sidebar_tab {
 float: left;
 width: 30px;
}
.sidebar_tab li {
 padding: 5px;
 border: 1px solid #ccc;
 background: #fff;
}
.sidebar_tab a {
 font-size: 14px;
 font-weight: bold;
 color: #ddd;
}
.sidebar_tab li:hover a {
 color: #fff;
}
.sidebar_tab_all a {
 color: #5a4e4d;
}
li.sidebar_tab_cur {
 margin-left: -7px;
 padding-left: 12px;
 -moz-border-radius: 8px 0 0 8px;/* FF浏览器低版本 圆角 */
 -webkit-border-radius: 8px 0 0 8px;/* Chrome和Safari浏览器 圆角 */
 border-radius: 8px 0 0 8px;
 behavior: url(../js/tool_iecss3.htc);/* IE浏览器 圆角 */
 }
li.sidebar_tab_cur a {color:#fff;}
.sidebar_tab_all:hover,.sidebar_tab_all.sidebar_tab_cur {background:#5a4e4d;}
.sidebar_tab_appliance a {color:#3a4e8a;}
.sidebar_tab_appliance:hover,.sidebar_tab_appliance.sidebar_tab_cur {background:#3a4e8a;}
.sidebar_tab_shop a {color:#c17987;}
.sidebar_tab_shop:hover,.sidebar_tab_shop.sidebar_tab_cur {background:#c17987;}
/* 主要内容区样式 */
.sidebar_main {
 float: left;
 margin-top: -30px;
 width: 300px;
}
.sidebar_main h2 {
 padding-left: 10px;
 line-height: 30px;
 color: #ccc;
}
.sidebar_main ul li {
 position: relative;
 padding: 5px 0 5px 10px;
 border-bottom: 1px solid #666;
}
.sidebar_main_all li {background:#877e7d;}
.sidebar_main_all h2,.sidebar_main_all li:hover {background:#736867;}
.sidebar_main_appliance li {background:#688ac8;}
.sidebar_main_appliance h2,.sidebar_main_appliance li:hover {background:#5568a3;}
.sidebar_main_shop li{background:#e68786;}
.sidebar_main_shop h2,.sidebar_main_shop li:hover {background:#bd7382;}
.sidebar_main li:hover em {display:none;}
.sidebar_main ul li a {padding-right:10px;}
.sidebar_main a {font-size:12px;}
.sidebar_main a:hover {text-decoration:underline;}
.sidebar_main h3 em {
 float:right;
 margin-right:20px;
 font-style:normal;
 color:#666;
}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
 $(function() {
 /*切换导航，添加当前效果*/
 $(".sidebar_tab li a").mouseover(function() {
  $(this).parent("li").addClass("sidebar_tab_cur");
  $(this).parent("li").siblings().removeClass("sidebar_tab_cur");
 });
 /*鼠标移入导航，切换对应内容*/
 $(".sidebar_tab_all").mouseover(function() {
  $(".sidebar_main_all").show().siblings().hide();
 });
 $(".sidebar_tab_appliance").mouseover(function() {
  $(".sidebar_main_appliance").show().siblings().hide();
 });
 $(".sidebar_tab_shop").mouseover(function() {
  $(".sidebar_main_shop").show().siblings().hide();
 });
 });
 </script> 
</head>
<body>
<div class="sidebar">
 <!--导航切换-->
 <ul class="sidebar_tab">
  <li class="sidebar_tab_all sidebar_tab_cur"><a href="#">所有商品</a></li>
 <li class="sidebar_tab_appliance"><a href="#">电器城</a></li>
 <li class="sidebar_tab_shop"><a href="#">美容院</a></li>
 </ul>
 <!--内容切换-->
 <div class="sidebar_main">
 <!--所有商品分类-->
 <div class="sidebar_main_all">
   <h2>所有商品分类</h2>
   <ul>
    <li>
    <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><em>></em></h3>
    <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
    <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">家居服</a></p>
   </li> 
  <li>
   <h3><a href="#">女装</a><a href="#">内衣</a><a href="#">配件</a><em>></em></h3>
    <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
    <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p>
   </li>
  <li><h3><a href="#">女装</a><a href="#">男装</a><a href="#">配件</a><em>></em></h3>
    <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
    <p><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p>
   </li>
  <li>
   <h3><a href="#">女装</a><a href="#">内衣</a><a href="#">配件</a><em>></em></h3>
    <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
    <p><a href="#">短裤</a><a href="#">文胸</a><a href="#">家居服</a></p>
   </li> 
  <li>
   <h3><a href="#">女装</a><a href="#">男装</a><a href="#">配件</a><em>></em></h3>
    <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
    <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p>
   </li>
   </ul>
 </div>
 <!--电器城商品分类-->
  <div class="sidebar_main_appliance" style="display:none;">
   <h2>电器城商品分类</h2>
   <ul>
   <li>
    <h3><a href="#">大家电</a><em>></em></h3>
  <p><a href="#">洗衣机</a><a href="#">冰箱</a><a href="#">空调</a></p>
   <p><a href="#">LED</a><a href="#">燃气灶</a></p>
  </li>
  <li>
    <h3><a href="#">生活电器</a><em>></em></h3>
  <p><a href="#">洗衣机</a><a href="#">油烟机</a><a href="#">空调</a></p>
   <p><a href="#">液晶电视</a><a href="#">电视</a><a href="#">燃气灶</a></p>
  </li>
  <li>
    <h3><a href="#">厨房电器</a><em>></em></h3>
  <p><a href="#">洗衣机</a><a href="#">冰箱</a><a href="#">空调</a></p>
   <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p>
  </li>
  <li>
    <h3><a href="#">大家电</a><em>></em></h3>
  <p><a href="#">洗衣机</a><a href="#">油烟机</a><a href="#">空调</a></p>
   <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p>
  </li>
  <li>
    <h3><a href="#">大家电</a><em>></em></h3>
  <p><a href="#">油烟机</a><a href="#">冰箱</a><a href="#">空调</a></p>
   <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p>
  </li>
  </ul>
 </div>
 <!--美容院商品分类-->
 <div class="sidebar_main_shop" style="display:none;">
   <h2>美容院商品分类</h2>
   <ul>
   <li>
    <h3><a href="#">家饰鲜花</a><em>></em></h3>
   <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p>
  <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">鲜花</a></p>
  </li>
  <li>
    <h3><a href="#">家饰鲜花</a><em>></em></h3>
   <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p>
  <p><a href="#">油画</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p>
  </li>
  <li>
    <h3><a href="#">家饰鲜花</a><em>></em></h3>
   <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p>
  <p><a href="#">装饰器皿</a><a href="#">鲜花</a></p>
  </li>
  <li>
    <h3><a href="#">家饰鲜花</a><em>></em></h3>
   <p><a href="#">装饰画</a><a href="#">花瓶</a></p>
  <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">鲜花</a></p>
  </li>
  <li>
    <h3><a href="#">家饰鲜花</a><em>></em></h3>
   <p><a href="#">装饰画</a><a href="#">花瓶</a></p>
  <p><a href="#">油画</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p>
  </li>
  <li>
    <h3><a href="#">家饰鲜花</a><em>></em></h3>
   <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a></p>
  <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">装饰器皿</a></p>
  </li>
  </ul>
 </div>
 </div><!--内容切换end-->
</div>
</body>
</html>
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Verwandte Etiketten：
jquery
Quelle：php.cn
Vorheriger Artikel：JQuery-Mosaik-Splicing-Flip-Effekt-Code-sharing_jquery Nächster Artikel：Mehrstufiger Webmenüeffekt mit horizontalem Layout, implementiert durch jquery CSS
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...
Aus 2024-04-06 14:54:03
0
2
421
So rufen Sie Werte nicht ausgewählter Zeilen in einer HTML-Datentabelle mithilfe von JQuery ab Ich versuche, den Wert aller Zeilen zu ermitteln, in denen nicht auf die Schaltfläche gekl...
Aus 2024-04-05 09:26:49
0
1
1418
Benötigen Sie ein JQuery-Skript, um ausgewählte Optionen basierend auf der aktuellen Auswahl des Endbenutzers aus einem Auswahlfeld zu verschieben Ich habe eine HTML-Seite, auf der der Endbenutzer unsere Artikel über ein Auswahlfeldeleme...
Aus 2024-04-04 18:40:04
0
1
3528
Ich habe über Lesezeichen ein Element in reinem CSS erstellt. Es ist erstellt, aber nicht sichtbar Mein Code lautet wie folgt: g=document.createElement('div');g.setAttribute("id",...
Aus 2024-04-04 17:27:27
0
1
417
Formulardaten können nicht auf Safari/Firefox iOS gesendet werden Dies funktioniert auf allen Plattformen außer Safari/Firefox unter iOS: jQuery("#gfor...
Aus 2024-04-04 12:53:48
0
1
303
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage