L'exemple de code de changement d'onglet le plus simple

L'éditeur suivant vous apportera l'exemple de code le plus simple de changement d'onglet. L’éditeur le trouve plutôt bien, alors j’aimerais le partager avec vous maintenant et le donner comme référence pour tout le monde. Venez jeter un œil avec l'éditeur

JS :

$(".con").eq(0).show();
  $(".btn span").click(function(){
    var num =$(".btn span").index(this);
    $(".con").hide();
    $(".con").eq(num).show().slblings().hide();
  })

CSS :

body { cursor:default; -webkit-text-size-adjust:none; font-size:12px; font-family:Arial; background:#FFF; }
.clear { zoom:1; }
.clear:after { visibility:hidden; display:block; font-size:0; content:"1"; clear:both; height:0; }
.main { width:500px; margin:20px auto; }
.btn span { width:35px; text-align:center; color:#fff; background:#f00; cursor:pointer; margin:0 5px; display:block; float:left; }
.con { display:none; border:#033 1px solid; height:100px; width:200px; }

HTML :

<p class="main">
 <p class="btn clear"><span>1</span><span>2</span><span>3</span></p>
 <p class="con">第一个<br /> </p>
 <p class="con">第二个<br /> </p>
 <p class="con">第三个<br /> </p>
</p>

Capture d'écran

L'exemple de code de changement d'onglet le plus simple ci-dessus est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous prendrez en charge le site Web PHP chinois.

Pour plus d'articles liés à l'exemple de code de changement d'onglet le plus simple, veuillez faire attention au site Web PHP chinois !