Heim > Artikel > Web-Frontend > Zwei Beispiele für JQuery-Registerkarteneffekte (4)_jquery

Zwei Beispiele für JQuery-Registerkarteneffekte (4)_jquery

WBOYOriginal: 2016-05-16 15:39:001119Durchsuche

Werfen wir wie üblich einen Blick auf das endgültige Rendering:

Der Effekt ist ähnlich wie im vorherigen Menü. Wenn die Maus über das Etikett fährt, wird der entsprechende Inhalt unten angezeigt. Natürlich gibt es auch das Thema Schiebetüren.
Code der Titelseite:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
  <title></title> 
  <link href="css/tab.css" rel="stylesheet" type="text/css" /> 
  <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 
  <script src="js/tab.js" type="text/javascript"></script> 
</head> 
<body> 
  <form id="form1" runat="server"> 
  <div id="firstDiv"> 
    <ul> 
      <li class="tabin">标签一</li> 
      <li>标签二</li> 
      <li>标签三</li> 
    </ul> 
    <div class="contentin"> 
      我是标签一的内容</div> 
    <div> 
      我是标签二的内容</div> 
    <div> 
      我是标签三的内容</div> 
  </div> 
  </form> 
</body> 
</html>

tab.css

ul,li 
{ 
  list-style:none; 
  margin:0; 
  padding:0; 
  } 
li 
{ 
  background-color:#6E6E6E; 
  float:left; 
  color:White; 
  padding:5px; 
  margin-right:3px;  
  border: 1px solid white;   
  } 
.tabin 
{ 
  border:1px solid #6E6E6E; 
  } 
#firstDiv div 
{ 
  clear:left; 
  background-color:#6E6E6E; 
  width:200px; 
  height:100px; 
  display:none; 
  } 
#firstDiv .contentin 
{ 
  display:block; 
  }

tab.js

/// <reference path="jquery-1.9.1.min.js" /> 
 
$(document).ready(function () { 
 
  var setTimeouId; 
 
  $("#firstDiv li").each(function (index) { 
    $(this).mouseover(function () { 
      var nodeTabin = $(this); 
      setTimeouId = setTimeout(function () { 
        $("#firstDiv .contentin").removeClass("contentin"); 
        $("#firstDiv .tabin").removeClass("tabin"); 
 
        $("#firstDiv div").eq(index).addClass("contentin"); 
        //我在这里犯错了哦，不应该再用this this如果用在这里的话那么是指的window 
        nodeTabin.addClass("tabin"); 
      }, 300); 
    }).mouseout(function () { 
      clearTimeout(setTimeouId); 
    }); 
  }); 
});

Der endgültige Effekt, den wir erzielt haben, ist in der Abbildung dargestellt:

Wenn Sie auf Etikett eins klicken, wird der gesamte Inhalt eines HTML-Codes unten geladen. Wenn Sie auf Etikett zwei klicken, wird ein Teil einer asp.net-Seite unten geladen, und Etikett drei wird kein Effekt hinzugefügt.
Der Code für das Frontend der Seite ist wie in der Abbildung dargestellt:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
  <title></title> 
  <link href="css/tab.css" rel="stylesheet" type="text/css" /> 
  <script src="js/jquery.js" type="text/javascript"></script> 
  <script src="js/tab.js" type="text/javascript"></script> 
</head> 
<body> 
  <form id="form1" runat="server"> 
  <div id="firstDiv"> 
    <ul> 
      <li class="tabin">标签一</li> 
      <li>标签二</li> 
      <li>标签三</li> 
    </ul> 
    <div class="contentin"> 
      我是标签一的内容</div> 
    <div> 
      我是标签二的内容</div> 
    <div> 
      我是标签三的内容</div> 
  </div> 
  <br /> 
  <br /> 
  <br /> 
  <div id="secondDiv"> 
    <ul> 
      <li class="tabin">标签一</li> 
      <li>标签二</li> 
      <li>标签三</li> 
    </ul> 
    <div id="secondContentin"> 
      <img alt="Zwei Beispiele für JQuery-Registerkarteneffekte (4)_jquery" src="images/img-loading.gif" /> 
      <div id="realContentin"></div> 
    </div> 
  </div> 
  </form> 
</body> 
</html>

tab.css

ul,li 
{ 
  list-style:none; 
  margin:0; 
  padding:0; 
  } 
#firstDiv li 
{ 
  background-color:#6E6E6E; 
  float:left; 
  color:White; 
  padding:5px; 
  margin-right:3px;  
  border: 1px solid white;   
  } 
#firstDiv .tabin 
{ 
  border:1px solid #6E6E6E; 
  } 
#firstDiv div 
{ 
  clear:left; 
  background-color:#6E6E6E; 
  width:200px; 
  height:100px; 
  display:none; 
  } 
#firstDiv .contentin 
{ 
  display:block; 
  } 
  
   
#secondDiv li 
{ 
  float:left; 
  color:Blue; 
  background-color:White; 
  padding:5px; 
  margin-right:3px; 
  /*当鼠标放在标签上时，显示成小手*/ 
  cursor:pointer; 
  } 
#secondDiv li.tabin 
{ 
  background-color:#F2F6F8; 
  border:1px solid black; 
  border-bottom:0; 
  /*只有position设置成relative或者absolute的时候z-index才有效*/ 
  position:relative; 
  z-index:100; 
  } 
#secondContentin 
{ 
  width:300px; 
  height:200px; 
  padding:10px; 
  background-color:#F2F6F8; 
  clear:left; 
  border:1px solid black; 
  /*下面是让底下的内容向上移动一个像素 
  *但是，我们可以看到，并没有达到我们想要的效果，接下 
  *来要上上面的li显示层次在最上面，这样就盖住了下面的div的border 
  */ 
  position:relative; 
  top:-1px; 
  } 
/*开始的时候让loading图片隐藏*/ 
img 
{ 
  display:none; 
  }

Was das Problem des Z-Index betrifft, wird es in den Kommentaren erläutert. Der Screenshot unten ist der Inhalt des js-Handbuchs, das ich gemacht habe:

tab.js

/// <reference path="jquery.js" /> 
 
$(document).ready(function () { 
 
  var setTimeouId; 
 
  $("#firstDiv li").each(function (index) { 
    $(this).mouseover(function () { 
      var nodeTabin = $(this); 
      setTimeouId = setTimeout(function () { 
        $("#firstDiv .contentin").removeClass("contentin"); 
        $("#firstDiv .tabin").removeClass("tabin"); 
 
        $("#firstDiv div").eq(index).addClass("contentin"); 
        //我在这里犯错了哦，不应该再用this this如果用在这里的话那么是指的window 
        nodeTabin.addClass("tabin"); 
      }, 300); 
    }).mouseout(function () { 
      clearTimeout(setTimeouId); 
    }); 
  }); 
 
  $("#realContentin").load("HTMLPage.htm"); 
  $("#secondDiv li").each(function (index) { 
    $(this).click(function () { 
      /*更改样式*/ 
      $("#secondDiv li.tabin").removeClass("tabin"); 
      $(this).addClass("tabin"); 
 
      if (index == 0) { 
        $("#realContentin").load("HTMLPage.htm"); 
      } else if (index == 1) { 
        $("#realContentin").load("Default.aspx div"); 
      } else if (index == 2) { 
 
      } 
    }); 
  }); 
 
  //我刚开始的时候用的是jquery的最新版本，但是出现了无法绑定的问题。 
  $("#secondContentin img").bind("ajaxStart", function () { 
    $(this).show(); 
  }).bind("ajaxStop", function () { 
    //setTimeout(function(){$(this).hide()},300); 
    $(this).hide(1000); 
  }); 
});

Hier möchte ich erwähnen, dass ich zu Beginn jquery-1.9.1.min.js verwendet habe, aber beim Binden des Ajax-Ereignisses konnte ich es nicht binden, wohl aber das Klickereignis.
Daher empfehle ich Ihnen, nicht die neueste Version von jquery zu verwenden, um unerklärliche Probleme zu vermeiden.
In Bezug auf die beiden oben genannten Tab-Seiteneffekte hoffe ich, dass dieser vom Herausgeber zusammengestellte Artikel allen helfen kann.

Stellungnahme：

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

Vorheriger Artikel：JS implementiert unendliche Webseiten-Faltmenüs (ähnlich dem Baummenü) mit Effektcode_Javascript-FähigkeitenNächster Artikel：JS implementiert unendliche Webseiten-Faltmenüs (ähnlich dem Baummenü) mit Effektcode_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen