interface Web
js tutoriel
js simulation de la mise en œuvre du menu de sélection à plusieurs niveaux de Taobao method_javascript skills
js simulation de la mise en œuvre du menu de sélection à plusieurs niveaux de Taobao method_javascript skills
L'exemple de cet article décrit la méthode d'implémentation de js simulant le menu de sélection multi-niveaux de Taobao. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un code de menu de sélection à plusieurs niveaux basé sur js qui simule Taobao. Ce menu simule Taobao au début. Ce menu peut être comme un menu de sélection de données. par niveau, et enfin déterminer les données.
La capture d'écran de l'effet en cours d'exécution est la suivante :
L'adresse de la démo en ligne est la suivante :
http://demo.jb51.net/js/2015/js-ftaobao-select-menu-codes/
Le code spécifique est le suivant :
<!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>
<title>模拟淘宝网菜单选择</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="all">
body *{
font-size:14px;
margin:0;
padding:0;
}
#CategorySelector{
clear:both;
width:778px;
height:220px;
background-color:#FFF;
margin-bottom:8px;
}
#CategorySelector ul{
margin:0 3px 0 0;
padding:0;
border:1px solid #CCC;
float:left;
width:189px;
height:218px;
overflow:auto;
}
#CategorySelector ul.Blank{
background-color:#F6F6F6;
}
#CategorySelector li{
list-style-type:none;
width:auto;
height:20px;
margin:0 1px !important;
margin /**/:0 1px 0 -15px;
padding:0;
border:1px solid #FFF;
line-height:20px;
color:#444;
text-indent:3px;
cursor:default;
}
#CategorySelector li.Selected{
background-color:#CAFFC0;
border:1px solid #0A9800;
color:#006623;
}
#CategorySelector li.IsParent{
background-image:url(http://files.jb51.net/file_images/article/201508/201581893903737.gif);
background-position:99% 50%;
background-repeat:no-repeat;
}
#CategorySelector li.RecentUsed{
color:#170;
}
#CategoryTitle{
clear:both;
width:778px;
background-color:#FFF;
}
#CategoryTitle ul{
float:left;
}
#CategoryTitle li{
margin:0 3px 0 0;
float:left;
border:1px solid #CCC;
width:189px;
color:#0063C8;
font-weight:bold;
border-bottom:0px;
height:23px;
line-height:23px;
}
</style>
</head>
<body>
<div id="CategoryTitle">
<ul id="TitleContent">
<li> 选择宝贝类别</li>
<li> 选择游戏</li>
<li> 选择游戏区域</li>
<li> 选择服务器</li>
</ul>
</div>
<div id="CategorySelector">
<ul id="Category_ItemType" class="Blank">
</ul>
<ul id="Category_GameType" class="Blank">
</ul>
<ul id="Category_GameArea" class="Blank">
</ul>
<ul id="Category_GameServer" class="Blank">
</ul>
</div>
<script language="javascript" type="text/javascript" id="commonjs">
Array.prototype.S = String.fromCharCode(2);
Array.prototype.in_array = function(e)
{
var re = new RegExp(this.S+e+this.S);
return re.test(this.S+this.join(this.S)+this.S);
}
function DataContent()
{
this.Parent; // Parent Tags
this.ParentID;
this.Children; // Children Tags
this.ChildrenID;
}
function DataServer()
{
this.mList = new Array();
this.ListCount = function(){return this.mList.length;}
this.GetListObj = function(n)
{
if (n<this.ListCount()) return this.mList[n];
return null;
}
this.Add = function(sParent,sParentID,sChildren,sChildrenID)
{
obj = new DataContent();
obj.Parent = sParent;
obj.ParentID = sParentID;
obj.Children = sChildren;
obj.ChildrenID = sChildrenID;
this.mList[this.ListCount()] = obj;
}
}
function getTriggerNode(e) {
return (document.all)?event.srcElement:e.target;
}
function getObject(objID)
{
return document.getElementById(objID);
}
function CreateList(objName,objData,objSelected)
{
var listBox = getObject(objName[0]);
if(!listBox) return;
var strOutput = "";
var liClass = "";
var id = 0;
var op_txt = new Array();
var op_val = new Array();
var sub_val = new Array();
if (objSelected[0])
{
for(i=0;i<objData.ListCount();i++)
if(objData.GetListObj(i).ParentID==objSelected[0])
{
id = i;
break;
}
if(i==objData.ListCount()){
listBox.innerHTML="";
listBox.className="Blank";
return false;
}
}
if(objName[1])
for(i=0;i<objName[1].ListCount();sub_val.push(objName[1].GetListObj(i++).ParentID));
tmpobj = objData.GetListObj(id);
if (tmpobj.Children.length==0)
{
for(i=0;i<objData.ListCount();op_txt.push(objData.GetListObj(i).Parent),op_val.push(objData.GetListObj(i++).ParentID));
}
else
{
op_txt = tmpobj.Children;
op_val = tmpobj.ChildrenID;
}
for(i=0;i<op_txt.length;i++)
{
if(sub_val.in_array(op_val[i]))
liClass = "IsParent";
if(op_val[i] == objSelected[1]){
liClass += " Selected";
}
strOutput += '<li id="'+objName[0]+'__'+op_val[i]+'" class="'+liClass+'">'+op_txt[i]+'</li>';
liClass = '';
}
listBox.innerHTML = strOutput;
strOutput = "";
listBox.className="";
}
function changeCategoryStyle(ulID,liCurr){
if(lastSelectItem[ulID]){
lastSelectItem[ulID].className=lastSelectItem[ulID].className.replace("Selected","").replace(/\s+$/,"");
}
liCurr.className += " Selected";
lastSelectItem[ulID] = liCurr;
}
function changeCategory(evnt)
{
var obj = getTriggerNode(evnt);
var obj2 = obj;
if(obj2.nodeName=="DIV") return (0);
if(obj.nodeName != "LI")
obj = obj.parentNode;
while(obj2.nodeName != "UL")
obj2 = obj2.parentNode;
if(obj.nodeName != "LI") return;
changeCategoryStyle(obj2.id,obj);
var parentID = (obj.id).split("__")[1];
switch(obj2.id)
{
case itemtype:
break;
case gametype:
CreateList([gamearea,gameserverData],gameareaData,[parentID,0]);
break;
case gamearea:
CreateList([gameserver,],gameserverData,[parentID,0]);
break;
}
}
var cselect = "CategorySelector";
var itemtype = "Category_ItemType";
var gametype = "Category_GameType";
var gamearea = "Category_GameArea";
var gameserver = "Category_GameServer";
var lastSelectItem = {itemtype:new Object(),gametype:new Object(),gamearea:new Object(),gameserver:new Object()};
var itemtypeData = new DataServer();
itemtypeData.Add("武器",1,[],[]);
itemtypeData.Add("防具",2,[],[]);
var gametypeData = new DataServer();
gametypeData.Add("魔力宝贝",1,[],[]);
gametypeData.Add("仙境传说",2,[],[]);
var gameareaData = new DataServer();
gameareaData.Add("魔力宝贝",1,["天歇","牧羊"],[1,2]);
gameareaData.Add("仙境传说",2,["上海","北京"],[3,4]);
var gameserverData = new DataServer();
gameserverData.Add("天歇",1,["平顶","山顶"],[1,2]);
gameserverData.Add("牧羊",2,["平顶2","山顶2"],[3,4]);
//gameserverData.Add("上海",3,["sfdsadfas","sdf"],[5,6]);
gameserverData.Add("北京",4,["asdf","asdff"],[7,8]);
CreateList([itemtype,],itemtypeData,[0,0]);
CreateList([gametype,gameareaData],gametypeData,[0,0]);
getObject(cselect).onclick = changeCategory;
</script>
</body>
</html>
J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment vérifier où se trouve l'adresse de livraison de Taobao ? Comment vérifier l'adresse de livraison des commandes passées sur l'application Taobao ?
Mar 12, 2024 pm 04:00 PM
L'application Taobao peut satisfaire tous vos problèmes d'achat. Il y a tellement de commerçants ici et tellement de produits qui attendent que vous choisissiez. Quel que soit le type de produits que vous souhaitez acheter, vous pouvez les rechercher et les trouver directement. passez des commandes et des achats, et toutes les fonctions peuvent être utilisées librement. Lorsque vous passez une commande avec succès, il vous suffit d'attendre que le commerçant expédie les marchandises et effectue la livraison logistique. C'est très pratique et beaucoup, tout le monde peut choisir de voir. les lieux d'expédition de ces produits et savoir où leurs produits sont expédiés. Surtout lorsque vous achetez des produits électroniques, vous pouvez vérifier certaines informations sur les lieux d'expédition associés pour éviter le problème de l'achat de certaines machines reconditionnées.
Comment obtenir une enveloppe rouge gratuite Taobao 2024
May 09, 2024 pm 03:22 PM
L'événement de commande gratuite Taobao 2024 aura lieu trois fois par jour. Vous devez passer une commande et payer la quantité correspondante de marchandises à l'heure correspondante. Le montant de la commande gratuite sera distribué sous forme d'enveloppes rouges de montants égaux. Ensuite, je vais vous expliquer comment recevoir l'enveloppe rouge de commande gratuite Taobao en 2024 : récupérez-la. Pour les utilisateurs gratuits, la qualification d'enveloppe rouge sera délivrée au package carte et coupon, qui est en état d'activation ; la version Web de Taobao ne dispose actuellement pas du package de cartes et de coupons et affiche uniquement les enregistrements gagnants de l'événement de commande gratuite ; le package de cartes et de coupons se trouve dans [Taobao APP-Mon Taobao] -Mes droits-Enveloppe rouge]. Comment obtenir des enveloppes rouges pour des commandes gratuites sur Taobao 20241. Pour les utilisateurs qui obtiennent des commandes gratuites, les qualifications de l'enveloppe rouge seront distribuées aux packages de cartes et de coupons, qui sont en attente d'activation 2. La version Web de Taobao ; n'a actuellement pas de packages de cartes et de coupons et affiche uniquement les enregistrements gagnants des activités de commande gratuites ;3. Le package de coupons de cartes se trouve dans [Taobao APP-My Taobao-Mes droits-Enveloppe rouge]
Comment rejeter les messages d'étrangers sur Taobao
Mar 02, 2024 am 08:40 AM
Lors du processus d'utilisation de Taobao, nous recevrons des messages d'utilisateurs étranges. Ce qui suit vous expliquera comment configurer le rejet des messages provenant d'étrangers. 1. Après avoir ouvert Taobao sur votre téléphone mobile pour accéder à l'interface, cliquez sur l'élément « Message » en bas pour y accéder, puis cliquez sur l'icône « + » en haut à droite pour l'ouvrir. 2. Une fenêtre apparaîtra sous l'icône, cliquez et sélectionnez l'élément "Paramètres du message". 3. Il y a un « Paramètres de discussion avec des étrangers » sur la page des paramètres de message, cliquez dessus pour entrer. 4. Enfin, vous verrez la fonction « Rejeter les messages d'étrangers » dans l'interface dans laquelle vous entrez. Cliquez sur le bouton de commutation correspondant derrière. Lorsque le bouton est mis en couleur, il est activé. Lorsque vous utilisez Taobao, vous ne recevrez plus de messages d'utilisateurs inconnus.
Comment désactiver le paiement sans mot de passe sur Taobao. Comment annuler la méthode de configuration du paiement sans mot de passe.
Mar 12, 2024 pm 12:07 PM
Il existe de nombreuses fonctions sur l'application Taobao. Ces fonctions existent pour que chacun puisse bénéficier d'une meilleure expérience d'achat. Le grand nombre de types de produits peut bien répondre aux besoins d'achat des différents utilisateurs. Vous pouvez effectuer une recherche par catégorie ou rechercher directement ces produits. Il n'y aura aucun problème. Tout le monde peut acheter en ligne en toute confiance. Nous vous fournirons des services d'achat d'un bon rapport qualité-prix. Cela vous donnera certainement tout ce que vous voulez. Lorsque vous magasinez ici, vous trouverez ici une variété de méthodes d'achat qui vous permettent de choisir. Certaines personnes aiment la fonction de paiement sans mot de passe ici, et d'autres ne l'aiment pas, mais je pense que la sécurité n'est pas si élevée. Bien entendu, tout le monde peut annuler à tout moment.
Comment changer de nom sur Taobao
Mar 24, 2024 pm 03:31 PM
La fonction de changement de nom permet aux utilisateurs de changer librement leurs noms et surnoms dans Taobao. Certains utilisateurs ne savent pas comment changer leur nom sur Taobao. Il suffit de cliquer sur le compte Taobao de l'avatar dans les paramètres de Mon Taobao pour le modifier. l'éditeur vous l'apportera. Ceci est une introduction à la façon de changer votre nom et votre pseudo. Si vous ne le savez pas encore, téléchargez-le et essayez-le. Tutoriel d'utilisation de Taobao : Comment changer le nom sur Taobao ? Réponse : Dans les paramètres de Mon Taobao, cliquez sur le compte Taobao de l'avatar pour le modifier. Introduction détaillée : 1. Entrez Taobao et cliquez sur [Mon Taobao] en bas à droite. . 2. Cliquez sur l'icône [Paramètres] en haut à droite. 3. Cliquez sur l'avatar. 4. Cliquez à nouveau sur [Compte Taobao]. 5. Cliquez sur [Modifier le nom du compte], saisissez-le et modifiez-le.
Comment désactiver le rappel d'enveloppe rouge sur Taobao
Apr 01, 2024 pm 06:25 PM
Taobao est un logiciel d'achat en ligne couramment utilisé par de nombreux amis. Vous passez généralement des commandes et achetez beaucoup de choses sur Taobao. Il offre aux utilisateurs une fonction de rappel d'enveloppe rouge. Certains amis souhaitent le désactiver, alors dépêchez-vous et consultez le PHP chinois. site Internet. Liste des étapes pour désactiver les rappels d'enveloppes rouges sur Taobao 1. Ouvrez le centre personnel de l'application Taobao et sélectionnez le bouton [Paramètres] pour accéder à la page. 2. Recherchez l'option [Notification de message] Ici, vous pouvez sélectionner le bouton-poussoir de message, rechercher le message de l'enveloppe rouge et éteindre le commutateur. 3. Ou vous pouvez désactiver l'autorisation de notification de l'application Taobao via la page des paramètres de votre téléphone mobile, afin que tous les messages de Taobao n'entrent pas dans le push et ne puissent être vus qu'après l'avoir allumé. 4. Les utilisateurs peuvent définir les types de messages qu'ils souhaitent recevoir, ce qui facilite leur utilisation.
Comment vérifier le montant total de la consommation sur Taobao Comment vérifier le montant total de la consommation
Mar 12, 2024 pm 03:07 PM
Si nous avons habituellement besoin de faire des achats en ligne, nous choisirons tous Taobao comme plate-forme, qui peut répondre pleinement à tous nos besoins d'achat. Elle dispose de nombreuses ressources pour divers produits, et il existe vraiment toutes sortes de produits sur lesquels elle est rassemblée. cette plateforme. Tout le monde a découvert qu'il existe de nombreuses catégories de produits ici, et vous pouvez les choisir en fonction de vos propres besoins, donc tout le monde l'achètera certainement ici. les prix de ces produits sont très différents. Tous ces enregistrements d'achats peuvent être enregistrés, ce qui peut être pratique pour tout le monde de vérifier à tout moment. Donc, si vous savez ce que vous achetez ici, combien d'argent avez-vous dépensé exactement ? Vous devez être très curieux. Voici les éditeurs.
Les remboursements gratuits des enveloppes rouges « Taobao » seront-ils retournés ?
May 08, 2024 am 08:16 AM
Lorsque nous faisons des achats sur Taobao, nous utilisons souvent des enveloppes rouges gratuites pour bénéficier de réductions. Mais si nous avons besoin d’un remboursement, ces enveloppes rouges gratuites seront-elles retournées ? Jetons un coup d'œil à la réponse à cette question. Les enveloppes rouges gratuites de Taobao seront-elles remboursées ? Selon la situation, lorsque vous recevez une enveloppe rouge, l'enveloppe rouge est en attente d'activation. Avant d'échanger le produit, l'enveloppe rouge à activer n'est pas activée et ne peut pas être utilisée. temporairement. Vous attendrez que la réception du produit acheté soit confirmée, l'enveloppe rouge qui doit être activée peut être utilisée. S'il y a un problème avec le produit après avoir utilisé l'enveloppe rouge gratuite et qu'il doit être retourné, alors le retour de l'enveloppe rouge doit être jugé en fonction de la situation réelle : 1. Règles de remboursement 11. Si un remboursement intervient après le Une enveloppe rouge est utilisée, l'enveloppe rouge sera restituée au prorata. 2. Si l'enveloppe rouge n'est pas en retard, la période d'utilisation de l'enveloppe rouge retournée est la période d'utilisation initiale. Si elle est en retard, elle sera émise dans les 7 jours.
