recherche

Maison >interface Web >js tutoriel >Implémentation d'un code d'effet de changement de style simple basé sur les compétences JS_javascript

Implémentation d'un code d'effet de changement de style simple basé sur les compétences JS_javascript

WBOY
WBOYoriginal
2016-05-16 15:40:511297parcourir

L'exemple de cet article décrit l'implémentation d'un effet de changement de style simple basé sur JS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un code de changement de style simple basé sur JS, qui peut changer librement de style CSS. De nombreux grands sites Web l'utilisent maintenant. Je pense que c'est une fonction très pratique et bonne, j'espère que tout le monde l'aimera.

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-simple-tab-cha-style-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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript" type="text/javascript">
var lastObj=null;
var lastIdx=1;
function test(obj,idx){
 if(!lastObj){
 lastObj = document.getElementById("test");
 lastIdx = 1;
 }
 lastObj.className = "new"+lastIdx;
 var old = document.getElementById("list"+lastIdx);
 if(old)old.style.display="none";
 obj.className = "class"+idx;
 var n = document.getElementById("list"+idx);
 if(n)n.style.display="block";
 lastObj = obj;
 lastIdx = idx;
}
</script>
<style type="text/css">
 .class1{ color:#FF0000}
 .new1{ color:#996633}
 .class2{ color:#FF0000}
 .new2{ color:#996633}
</style>
<title>JS实现样式切换</title>
</head>
<body>
<a href="#" class="class1" id="test" onclick="test(this,1)">list1</a>
<a href="#" class="new2" onclick="test(this,2)">list2</a>
<div id="list1">
test1
</div>
<div id="list2" style="display:none">
test2
</div>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration：
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
Article précédent：jQuery focus chart carrousel effets spéciaux partage de code (3 modèles)_jqueryArticle suivant：jQuery focus chart carrousel effets spéciaux partage de code (3 modèles)_jquery

Articles Liés

Voir plus