Heim Web-Frontend js-Tutorial 使用JQuery快速实现Tab的AJAX动态载入(实例讲解)_jquery

使用JQuery快速实现Tab的AJAX动态载入(实例讲解)_jquery

May 16, 2016 pm 05:09 PM
tab

下面我就简单讲一下实现过程:

1.找到链接源,我这里是一串的Li下的链接

2.处理样式

3.当鼠标移过时载入链接源的网站到指定容器,并切换样式让点击事件返回false,这里不会应该点击到链接源网页

5.Over了.

脚本:

复制代码 代码如下:

    {
    //homeNews
          var tid = "#homeNews";//removeTabBold
          var lvTabs = $(tid);
          if(lvTabs != null)
          {
            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)
    {

       $(LvTabId).find("a").each(function(){
$(this).removeClass("bold");
$(this).parent().removeClass("lvbg");
$(this).parent().parent().parent().removeClass("lvp");});
    }

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Zwei -Punkte -Museum: Alle Exponate und wo man sie finden kann
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Lösen Sie das Problem, dass die Tabulatortaste von CentOS7 Befehle nicht ausführen kann Lösen Sie das Problem, dass die Tabulatortaste von CentOS7 Befehle nicht ausführen kann Jan 17, 2024 pm 01:30 PM

Heute habe ich ein Experiment mit centOS durchgeführt und festgestellt, dass die unter Ubuntu übliche Tabulatortasten-Vervollständigungsmethode nicht verwendet werden konnte. Nachdem ich nach Informationen gesucht und sie selbst getestet hatte, habe ich die möglichen Lösungen wie folgt aufgezeichnet: 1) Zuerst müssen Sie den folgenden Befehl im Terminal ausführen: #yuminstallbash-completion//Sie können auch die Wildcard-Installation verwenden: yuminstallbash-c* oder Sie können einige Initialisierungspaketgruppen yum-ygroupinstallBaseCompatibilitylibrariesDebuggingToolsDial-upNetworkingsupppo installieren

Wie implementiert man Tab-Komponenten und Multi-Tab-Seiten in Vue? Wie implementiert man Tab-Komponenten und Multi-Tab-Seiten in Vue? Jun 25, 2023 am 09:33 AM

Mit der kontinuierlichen Aktualisierung der Front-End-Technologie ist Vue als beliebtes Front-End-Framework zur ersten Wahl vieler Entwickler geworden. In tatsächlichen Projekten ist es häufig erforderlich, Registerkartenkomponenten und Seiten mit mehreren Registerkarten zu verwenden, um verschiedene Funktionsmodule zu wechseln und zu verwalten. In diesem Artikel stellen wir vor, wie Sie mit Vue eine einfache Tab-Komponente und eine Seite mit mehreren Tabs implementieren. 1. Implementieren Sie eine einfache Tab-Komponente. Erstellen Sie eine Tab.vue-Komponente im Projekt, um sie anzuzeigen.

Welche drei Möglichkeiten gibt es, Tabs in Vue zu implementieren? Welche drei Möglichkeiten gibt es, Tabs in Vue zu implementieren? Jan 29, 2023 pm 02:49 PM

Es gibt drei Möglichkeiten, Tabs in Vue zu implementieren: 1. Tab-Inhaltsumschaltung über „v-show“ steuern; 2. Tab-Umschaltung über die IS-Funktion und „Keep-Alive“-Cache in Vue implementieren; -link" .

Warum kann Alt+Tab nicht zwischen Schnittstellen wechseln? Warum kann Alt+Tab nicht zwischen Schnittstellen wechseln? Mar 09, 2023 pm 02:11 PM

Der Grund, warum Alt+Tab die Schnittstelle nicht wechseln kann, ist, dass dieser Befehl deaktiviert ist: 1. Schalten Sie den Computer ein, klicken Sie auf das Startmenü und wählen Sie den Befehl „Ausführen“. 2. Geben Sie „regedit“ in die leere Leiste ein rechts vom Start und klicken Sie auf OK. 3. Rufen Sie den Registrierungsmanager auf und suchen Sie die Option „AltTabSettings“. Ändern Sie die Wertdaten in der geöffneten Option in „00000001“ und klicken Sie auf „Bestätigen“. .

RedMagic enthüllt weitere Spezifikationen seines neuen Gaming-Tablets RedMagic enthüllt weitere Spezifikationen seines neuen Gaming-Tablets Sep 01, 2024 am 06:34 AM

Das zweite RedMagic-Gaming-Tablet wird am 5. September vollständig vorgestellt. Ein kürzlich durchgeführter Benchmark-Durchlauf auf AnTuTu ergab, dass es mit der führenden Version Snapdragon 8 Gen 3 ausgestattet sein wird und damit genauso leistungsfähig ist wie das neueste Android-Smartphone des Unternehmens, das 9S Pr

Das RedMagic Gaming Tablet Pro wird als erstes Tab mit der führenden Version von Snapdragon 8 Gen 3 eingeführt Das RedMagic Gaming Tablet Pro wird als erstes Tab mit der führenden Version von Snapdragon 8 Gen 3 eingeführt Sep 05, 2024 pm 09:30 PM

RedMagic hat das Gaming Tablet Pro vollständig vorgestellt, das erste Tablet mit der führenden Version von Snapdragon 8 Gen 3. Es handelt sich im Grunde um die übertaktete Version des Standard-SoC, und damit führt das RedMagic 9S Pro die Benchmarks an. Das Gleiche gilt auch hier

Deal | Das Android-Tablet Lenovo Tab P12 mit großem 3K-Display erhält einen verlockenden Preisnachlass von 29 % Deal | Das Android-Tablet Lenovo Tab P12 mit großem 3K-Display erhält einen verlockenden Preisnachlass von 29 % Aug 15, 2024 am 06:44 AM

Viele Reisende, die sich auf den Sommerurlaub freuen, fragen sich wahrscheinlich, wie sie auf einer langen Zugfahrt oder einem internationalen Flug die Zeit totschlagen können, und ein günstiges Multimedia-Tablet wie das Lenovo Tab P12 könnte dieses Problem lösen. Folge

Xiaomi gibt den Starttermin des neuen Poco Pad mit 5G-Konnektivität bekannt Xiaomi gibt den Starttermin des neuen Poco Pad mit 5G-Konnektivität bekannt Aug 17, 2024 am 06:32 AM

Xiaomi hat ein neues Android-Tablet angekündigt, das unter der Marke Poco auf den Markt kommen wird. Es heißt Poco Pad 5G und soll am 23. August in Indien auf den Markt kommen. Der allererste Tisch, der unter der Marke Poco auf den Markt kam, wurde im Mai dieses Jahres vorgestellt

See all articles