首頁 web前端 js教程 使用JQuery快速實現Tab的AJAX動態載入(實例講解)_jquery

使用JQuery快速實現Tab的AJAX動態載入(實例講解)_jquery

May 16, 2016 pm 05:09 PM
tab

下面我就簡單講一下實現過程:

1.找到連結來源,我這裡是一串的Li下的連結

2.處理樣式

3.當滑鼠移過時載入連結來源的網站到指定容器,並切換樣式讓點擊事件返回false,這裡不會應該點擊到連結來源網頁

5.Over了.

腳本:

複製程式碼 程式碼如下:

  
          var tid = "#homeNews";//removeTabBold
          var lvTabs = $(tid);            lvTabs.find("a") .each(function(){$(this).click(function(){return false;});$(this).mouseover(function(){
removeTabBold(tid);$(this).addClass( "bold");
$(this).parent().addClass("lvbg");
$('#HomeNewsList').load($(this).href());
return false;})});
          }
    }
    function removeTabBold(LvTabId)
   function removeTabBold(LvTabId)
 
       $(LvTabId).find("a").each(function(){
$(this).removeClass("bold");$(this).parent().removeClass("bold");

$(this).parent().removeClass( "lvbg");
$(this).parent().parent().parent().removeClass("lvp");});
    }


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

解決CentOS7的Tab鍵無法補全指令問題 解決CentOS7的Tab鍵無法補全指令問題 Jan 17, 2024 pm 01:30 PM

解決CentOS7的Tab鍵無法補全指令問題

Vue 中如何實作 tab 元件及多標籤頁? Vue 中如何實作 tab 元件及多標籤頁? Jun 25, 2023 am 09:33 AM

Vue 中如何實作 tab 元件及多標籤頁?

vue實作tab三種方式是什麼 vue實作tab三種方式是什麼 Jan 29, 2023 pm 02:49 PM

vue實作tab三種方式是什麼

alt+tab切換不了介面什麼原因 alt+tab切換不了介面什麼原因 Mar 09, 2023 pm 02:11 PM

alt+tab切換不了介面什麼原因

RedMagic 公佈了其新遊戲平板電腦的更多規格 RedMagic 公佈了其新遊戲平板電腦的更多規格 Sep 01, 2024 am 06:34 AM

RedMagic 公佈了其新遊戲平板電腦的更多規格

RedMagic Gaming Tablet Pro 推出首款搭載 Snapdragon 8 Gen 3 領先版本的平板電腦 RedMagic Gaming Tablet Pro 推出首款搭載 Snapdragon 8 Gen 3 領先版本的平板電腦 Sep 05, 2024 pm 09:30 PM

RedMagic Gaming Tablet Pro 推出首款搭載 Snapdragon 8 Gen 3 領先版本的平板電腦

交易 |配備 3K 大顯示器的聯想 Tab P12 Android 平板電腦降價 29% 交易 |配備 3K 大顯示器的聯想 Tab P12 Android 平板電腦降價 29% Aug 15, 2024 am 06:44 AM

交易 |配備 3K 大顯示器的聯想 Tab P12 Android 平板電腦降價 29%

小米公佈了具有 5G 連接功能的新 Poco Pad 的上市日期 小米公佈了具有 5G 連接功能的新 Poco Pad 的上市日期 Aug 17, 2024 am 06:32 AM

小米公佈了具有 5G 連接功能的新 Poco Pad 的上市日期

See all articles