The simplest tab switching example code

The following editor will bring you the simplest tab switching example code. The editor thinks it’s pretty good, so I’d like to share it with you now and give it as a reference. Let’s follow the editor and take a look.

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>

Screenshot

The above article is the most The simple tab switching example code is all the content shared by the editor. I hope it can give you a reference, and I hope you will support the PHP Chinese website.

For more articles related to the simplest tab switching example code, please pay attention to the PHP Chinese website!