Heim  >  Artikel  >  Web-Frontend  >  Wechseln der Tab-Beschriftungen in JQuery

Wechseln der Tab-Beschriftungen in JQuery

零到壹度
零到壹度Original
2018-03-20 13:29:081315Durchsuche


In diesem Artikel werden hauptsächlich die spezifischen Schritte und die damit verbundenen Bedienungsfähigkeiten zum Wechseln von Tab-Tags in JQuery vorgestellt. Ich hoffe, dass er allen helfen kann.

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; overflow: auto;}

HTML

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

js

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">$(".con").eq(0).show();
$(".btn span").click(function() {
  var num = $(".btn span").index(this);
  $(".con").hide();
  $(".con").eq(num).show().slblings().hide();
})
</script>

Das obige ist der detaillierte Inhalt vonWechseln der Tab-Beschriftungen in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn