Maison interface Web js tutoriel 使用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");});
    }

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Résolvez le problème selon lequel la touche Tab de CentOS7 ne peut pas terminer les commandes Résolvez le problème selon lequel la touche Tab de CentOS7 ne peut pas terminer les commandes Jan 17, 2024 pm 01:30 PM

Aujourd'hui, je faisais une expérience sur centOS et j'ai découvert que la méthode de complétion des touches de tabulation habituelle utilisée sous Ubuntu ne pouvait pas être utilisée. J'étais donc très curieux après avoir recherché des informations et les avoir testées moi-même, j'ai enregistré les solutions possibles comme suit : 1) Tout d'abord, vous devez exécuter la commande suivante dans le terminal : #yuminstallbash-completion//Vous pouvez également utiliser une installation générique : yuminstallbash-c* ou vous pouvez installer certains groupes de packages d'initialisation yum-ygroupinstallBaseCompatibilitylibrariesDebuggingToolsDial-upNetworkingsupppo

Comment implémenter des composants d'onglets et des pages multi-onglets dans Vue ? Comment implémenter des composants d'onglets et des pages multi-onglets dans Vue ? Jun 25, 2023 am 09:33 AM

Avec la mise à jour continue de la technologie front-end, Vue, en tant que framework front-end populaire, est devenu le premier choix de nombreux développeurs. Dans les projets réels, il est souvent nécessaire d'utiliser des composants à onglets et des pages multi-onglets pour basculer et gérer différents modules fonctionnels. Dans cet article, nous présenterons comment utiliser Vue pour implémenter un composant à onglets simples et une page multi-onglets. 1. Implémentez un composant onglet simple. Créez un composant Tab.vue dans le projet pour l'afficher.

Quelles sont les trois façons d'implémenter l'onglet dans Vue ? Quelles sont les trois façons d'implémenter l'onglet dans Vue ? Jan 29, 2023 pm 02:49 PM

Il existe trois façons d'implémenter les onglets dans Vue : 1. Contrôler le changement de contenu des onglets via "v-show" ; 2. Implémenter le changement d'onglet via la fonctionnalité is et le cache "keep-alive" dans Vue 3. Implémenter le changement d'itinéraire via "router" ; -lien" .

Pourquoi alt+tab ne peut-il pas changer d'interface ? Pourquoi alt+tab ne peut-il pas changer d'interface ? Mar 09, 2023 pm 02:11 PM

La raison pour laquelle alt+tab ne peut pas changer d'interface est que cette commande est désactivée. La solution : 1. Allumez l'ordinateur, cliquez sur le menu Démarrer et sélectionnez la commande Exécuter. 2. Entrez « regedit » dans la barre vide ; à droite du début, puis cliquez sur OK ; 3. Entrez dans le gestionnaire de registre et recherchez l'option "AltTabSettings" ; 4. Double-cliquez sur "AltTabSettings", modifiez les données de valeur dans l'option ouverte en "00000001" et cliquez sur "Confirmer". .

RedMagic révèle plus de spécifications de sa nouvelle tablette de jeu RedMagic révèle plus de spécifications de sa nouvelle tablette de jeu Sep 01, 2024 am 06:34 AM

La deuxième tablette de jeu RedMagic sera entièrement dévoilée le 5 septembre. Une récente analyse de référence sur AnTuTu a révélé qu'elle comportera la version principale Snapdragon 8 Gen 3, la rendant aussi performante que le dernier smartphone Android de la société, le 9S Pr.

RedMagic Gaming Tablet Pro est lancé comme premier onglet avec Snapdragon 8 Gen 3 Leading Version RedMagic Gaming Tablet Pro est lancé comme premier onglet avec Snapdragon 8 Gen 3 Leading Version Sep 05, 2024 pm 09:30 PM

RedMagic a entièrement dévoilé la Gaming Tablet Pro, le premier onglet à présenter la version leader du Snapdragon 8 Gen 3. Il s’agit essentiellement de la version overclockée du SoC standard, et le RedMagic 9S Pro est en tête des benchmarks avec lui. La même chose est vraie pour ça

Offre | La tablette Android Lenovo Tab P12 avec grand écran 3K bénéficie d'une réduction de prix alléchante de 29 % Offre | La tablette Android Lenovo Tab P12 avec grand écran 3K bénéficie d'une réduction de prix alléchante de 29 % Aug 15, 2024 am 06:44 AM

De nombreux voyageurs qui attendent avec impatience leurs vacances d'été se demandent probablement comment perdre du temps lors d'un long trajet en train ou sur un vol international, et une tablette multimédia bon marché telle que la Lenovo Tab P12 pourrait résoudre ce problème. Conséquence

Xiaomi révèle la date de lancement du nouveau Poco Pad avec connectivité 5G Xiaomi révèle la date de lancement du nouveau Poco Pad avec connectivité 5G Aug 17, 2024 am 06:32 AM

Xiaomi a annoncé une nouvelle tablette Android qui sera lancée sous la marque Poco. Il s'appelle Poco Pad 5G et son lancement est prévu en Inde le 23 août. La toute première table lancée sous la marque Poco a été révélée en mai de ce mois-ci.

See all articles