Considérez ce qui suit mon code html
<html>
<head>
</head>
<body>
<div class="wrapper">
<section class="first">第一内容</div>
<section class="second">第二内容</div>
<section class="third">第三内容</div>
</div>
</body>
</html>
Ce dont j'ai besoin, c'est d'afficher le troisième contenu en haut de la vue du navigateur en changeant le nom de la classe au lieu de changer la position dans le code HTML. Dans le même temps, les changements doivent rester réactifs.
Mon code html est le suivant
<div class="wrapper">
<section class="third">第一内容</section>
<section class="second">第二内容</section>
<section class="first">第三内容</section>
</div> 
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'utiliserai un système de grille et commanderai. Utilisez ensuite js pour modifier le numéro de séquence afin que le troisième div devienne le premier. Pensez-vous que cela pourrait être une solution pour vous ?
Vous pouvez trouver plus d'informations ici : https://developer.mozilla.org/en-US/docs/Web/CSS/order
.wrapper{ display: grid; } .first{ order: 1; } .second{ order: 2; } .third{ order: 3; }Ensuite, vous pouvez utiliser JS pour changer le numéro de séquence
.wrapper{ display: flex; flex-flow: column; } .first{ order: 3; } .second{ order: 2; } .third{ order: 1; }<html> <head> </head> <body> <div class="wrapper"> <section class="first">First Content</section> <section class="second">Second Content</section> <section class="third">ThirdContent</section> </div> </body> </html>