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

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

WBOY
發布: 2016-05-16 17:09:47
原創
851 人瀏覽過

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

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


相關標籤:
tab
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板