Deux exemples d'effets de page à onglet JQuery (4)

Deux exemples d'effets de page à onglet JQuery (4)_jquery

WBOY

Libérer： 2016-05-16 15:39:00

original

1152 Les gens l'ont consulté

Comme d'habitude, regardons le rendu final :

L'effet est similaire au menu précédent. Lorsque la souris passe sur l'étiquette, le contenu correspondant s'affichera en dessous. Bien entendu, il y a aussi la question des portes coulissantes.
Code de la Une :

<%@ 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>

Copier après la connexion

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; 
  }

Copier après la connexion

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); 
    }); 
  }); 
});

Copier après la connexion

L'effet final que nous avons obtenu est illustré dans la figure :

Lorsque vous cliquez sur l'étiquette un, tout le contenu d'un code HTML est chargé en dessous ; lorsque vous cliquez sur l'étiquette deux, une partie d'une page asp.net est chargée en dessous et aucun effet n'est ajouté à l'étiquette trois.
Le code du frontend de la page est tel qu'indiqué dans la figure :

<%@ 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="Deux exemples deffets de page à onglet JQuery (4)_jquery" src="images/img-loading.gif" /> 
      <div id="realContentin"></div> 
    </div> 
  </div> 
  </form> 
</body> 
</html>

Copier après la connexion

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; 
  }

Copier après la connexion

Concernant la problématique du z-index, elle est expliquée dans les commentaires. La capture d'écran ci-dessous est le contenu du manuel js que j'ai pris :

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); 
  }); 
});

Copier après la connexion

Ici, je voudrais mentionner que lorsque j'ai commencé, j'utilisais jquery-1.9.1.min.js, mais lors de la liaison de l'événement ajax, je ne pouvais pas le lier, mais je pouvais lier l'événement click.
Par conséquent, je vous suggère de ne pas utiliser la dernière version de jquery pour éviter certains problèmes inexplicables.
Concernant les deux effets de page à onglet ci-dessus, j'espère que cet article compilé par l'éditeur pourra aider tout le monde.