简单的新闻栏切换窗(JQuery)

来源:互联网 发布:linux ifup eth0 编辑:程序博客网 时间:2024/05/18 22:11

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 <script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<style>
#tabs{zoom:1;clear:both;padding:.5em 1em;padding-bottom:0;margin:0;background:black;color:#aaaaaa;}
#tabs after{content:'.';visibility:hidden;display:block;clear:both;height:0;}
#tabs li{float:left;}
.active{background:white;color:black;font-weight:bold;}
#panes{border:1px solid black;font-weight:bold;}
</style>
</HEAD>
 <BODY>
  <ul id="tabs">
    <li>按钮1</li>
    <li>按钮2</li>    
<li>按钮3</li>
  </ul>
  <div id="panes">
  <div>窗体1</div>
  <div>窗体2</div>
  <div>窗体3</div>
  </div>
<script language="JavaScript">
$("#panes>div").hide().eq(0).show();
var current=$("#tabs>li").eq(0).addClass("active");
   $("#tabs>li").each(function(i){
        $(this).click(function(){
$("#panes>div") .hide().eq(i).show();
current.removeClass('active');
current=$(this);
current.addClass('active');
 });
 });
</script>
 </BODY>
</HTML>

 

原创粉丝点击