JQuery標(biāo)簽頁效果的兩個(gè)實(shí)例講解(4)
按照慣例,我們還是先來看一下最終要達(dá)到效果圖:
和上一個(gè)菜單效果類似,當(dāng)鼠標(biāo)移動(dòng)到標(biāo)簽上的時(shí)候,下面會(huì)顯示相應(yīng)的內(nèi)容。當(dāng)然,同樣存在滑動(dòng)門的問題。
前臺(tái)頁面的代碼:
<%@ 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">標(biāo)簽一</li> <li>標(biāo)簽二</li> <li>標(biāo)簽三</li> </ul> <div class="contentin"> 我是標(biāo)簽一的內(nèi)容</div> <div> 我是標(biāo)簽二的內(nèi)容</div> <div> 我是標(biāo)簽三的內(nèi)容</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"); //我在這里犯錯(cuò)了哦,不應(yīng)該再用this this如果用在這里的話那么是指的window nodeTabin.addClass("tabin"); }, 300); }).mouseout(function () { clearTimeout(setTimeouId); }); }); });
我們最終實(shí)現(xiàn)的效果如圖所示:
當(dāng)單擊標(biāo)簽一的時(shí)候,下面加載的是一個(gè)html的全部?jī)?nèi)容;當(dāng)單擊標(biāo)簽二的時(shí)候,下面加載的是一個(gè)asp.net頁面的一部分內(nèi)容,標(biāo)簽三未添加效果。
頁面前臺(tái)的代碼如圖:
<%@ 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">標(biāo)簽一</li> <li>標(biāo)簽二</li> <li>標(biāo)簽三</li> </ul> <div class="contentin"> 我是標(biāo)簽一的內(nèi)容</div> <div> 我是標(biāo)簽二的內(nèi)容</div> <div> 我是標(biāo)簽三的內(nèi)容</div> </div> <br /> <br /> <br /> <div id="secondDiv"> <ul> <li class="tabin">標(biāo)簽一</li> <li>標(biāo)簽二</li> <li>標(biāo)簽三</li> </ul> <div id="secondContentin"> <img alt="裝載中" 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; /*當(dāng)鼠標(biāo)放在標(biāo)簽上時(shí),顯示成小手*/ cursor:pointer; } #secondDiv li.tabin { background-color:#F2F6F8; border:1px solid black; border-bottom:0; /*只有position設(shè)置成relative或者absolute的時(shí)候z-index才有效*/ position:relative; z-index:100; } #secondContentin { width:300px; height:200px; padding:10px; background-color:#F2F6F8; clear:left; border:1px solid black; /*下面是讓底下的內(nèi)容向上移動(dòng)一個(gè)像素 *但是,我們可以看到,并沒有達(dá)到我們想要的效果,接下 *來要上上面的li顯示層次在最上面,這樣就蓋住了下面的div的border */ position:relative; top:-1px; } /*開始的時(shí)候讓loading圖片隱藏*/ img { display:none; }
關(guān)于z-index的問題,注釋上有說明,下面的截圖是我截的js手冊(cè)上的內(nèi)容:
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"); //我在這里犯錯(cuò)了哦,不應(yīng)該再用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) { } }); }); //我剛開始的時(shí)候用的是jquery的最新版本,但是出現(xiàn)了無法綁定的問題。 $("#secondContentin img").bind("ajaxStart", function () { $(this).show(); }).bind("ajaxStop", function () { //setTimeout(function(){$(this).hide()},300); $(this).hide(1000); }); });
在這里,我想提一下,就是我開始的時(shí)候,用的是jquery-1.9.1.min.js,但是在綁定ajax事件的時(shí)候,無法綁定,可以綁定click事件。
所以,我建議大家不要用最新版的jquery,避免出現(xiàn)一些莫名其妙的問題。
以上兩種標(biāo)簽頁效果,希望小編整理的這篇文章可以幫助到大家。
- js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁功能的方法
- jQuery實(shí)現(xiàn)簡(jiǎn)單的tab標(biāo)簽頁效果
- 基于jQuery實(shí)現(xiàn)多標(biāo)簽頁切換的效果(web前端開發(fā))
- JQuery標(biāo)簽頁效果實(shí)例詳解
- jQuery EasyUI 布局之動(dòng)態(tài)添加tabs標(biāo)簽頁
- jQuery EasyUI API 中文文檔 - Tabs標(biāo)簽頁/選項(xiàng)卡
- jquery tab標(biāo)簽頁的制作
- JS實(shí)現(xiàn)標(biāo)簽頁效果(配合css)
- 一個(gè)js隨機(jī)顏色腳本(用于標(biāo)簽頁面,也可用于任何頁面)
- jQuery實(shí)現(xiàn)標(biāo)簽頁效果實(shí)戰(zhàn)(4)
相關(guān)文章
jquery圖片放大功能簡(jiǎn)單實(shí)現(xiàn)
圖片放大在某些例如商品細(xì)節(jié)放大圖比較常見,本文寫了一個(gè)圖片放大的示例適合日常應(yīng)付,有需求的朋友可以參考下2013-08-08jquery中ajax使用error調(diào)試錯(cuò)誤的方法
這篇文章主要介紹了jquery中ajax使用error調(diào)試錯(cuò)誤的方法,實(shí)例分析了Ajax的使用方法與error函數(shù)調(diào)試錯(cuò)誤的技巧,需要的朋友可以參考下2015-02-02jQuery ctrl+Enter shift+Enter實(shí)現(xiàn)代碼
jQuery中對(duì)鍵盤事件進(jìn)行了修正 調(diào)用函數(shù)的時(shí)候傳入事件即可。2010-02-02jQuery將表單序列化成一個(gè)Object對(duì)象的實(shí)例
下面小編就為大家?guī)硪黄猨Query將表單序列化成一個(gè)Object對(duì)象的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11JQuery操作與遍歷元素并設(shè)置其屬性、樣式和內(nèi)容
本文詳細(xì)講解了JQuery操作與遍歷元素并設(shè)置其屬性、樣式和內(nèi)容的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04jQuery EasyUI 選項(xiàng)卡面板tabs的使用實(shí)例講解
下面小編就為大家分享一篇jQuery EasyUI 選項(xiàng)卡面板tabs的使用實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12簡(jiǎn)單實(shí)用jquery版三級(jí)聯(lián)動(dòng)select示例
本文主要為大家介紹下通過jquery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)select這里用到的json文件,只是事例,根據(jù)情況添加或編寫,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07利用jQuery對(duì)無序列表排序的簡(jiǎn)單方法
下面小編就為大家?guī)硪黄胘Query對(duì)無序列表排序的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10jquery實(shí)現(xiàn)手機(jī)端單店鋪購(gòu)物車結(jié)算刪除功能
本文主要介紹了js實(shí)現(xiàn)手機(jī)端單店鋪購(gòu)物車結(jié)算刪除功能的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02jquery輕量級(jí)數(shù)字動(dòng)畫插件countUp.js使用詳解
這篇文章主要為大家詳細(xì)介紹了jquery鼠標(biāo)滾動(dòng)數(shù)字增加插件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10