ホームページ >ウェブフロントエンド >jsチュートリアル >JQuery タブページの効果の 2 つの例 (4)_jquery
JQuery タブページの効果の 2 つの例 (4)_jquery
- WBOYオリジナル
- 2016-05-16 15:39:001162ブラウズ
いつものように、最終的なレンダリングを見てみましょう:
効果は前のメニューと同様で、マウスをラベルの上に移動すると、対応するコンテンツが下に表示されます。もちろん、スライドドアの問題もあります。
フロントページのコード:
<%@ 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);
});
});
});
達成された最終的な効果は図に示されています:
ラベル 1 をクリックすると、HTML のコンテンツ全体が下にロードされ、ラベル 2 をクリックすると、asp.net ページの一部が下にロードされ、ラベル 3 には効果は追加されません。
ページのフロントエンドのコードは図に示すとおりです:
<%@ 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="JQuery タブページの効果の 2 つの例 (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;
}
z-index の問題については、コメントで説明されています。以下のスクリーンショットは、私が撮影した js マニュアルの内容です。
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);
});
});
したがって、不可解な問題を避けるために、最新バージョンの jquery を使用しないことをお勧めします。
上記2つのタブページ効果について、編集者がまとめたこの記事が皆様のお役に立てれば幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。