tab

wangyongxin_2011

浏览: 8882 次
性别:
来自: 厦门

最近访客更多访客>>

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html

<!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 runat="server">
    <title></title>
        <script src="../js/jquery-1.4.4.js" type="text/javascript"></script>
        <script type="text/javascript">
         $(function () {
             $('#tabs-2').css('display', 'none');
             $('#tabs-3').css('display', 'none');
             $('#tabs-4').css('display', 'none');
             $('ul li').click(function () {
                 $('#tabs-1').css('display', 'none');
                 $('#tabs-2').css('display', 'none');
                 $('#tabs-3').css('display', 'none');
                 $('#tabs-4').css('display', 'none');
                 if ($(this).attr('id') == '1') $('#tabs-1').show();
                 if ($(this).attr('id') == '2') $('#tabs-2').show();
                 if ($(this).attr('id') == '3') $('#tabs-3').show();
                 if ($(this).attr('id') == '4') $('#tabs-4').show();
             });

         });

</script>
    <style type="text/css">

     ul.tab

{

     background-color:#CCC;
     height:25px;
     padding-top:10px;
     overflow:hidden;}
ul.tab li

{

float:left;

list-style-type: none;

     padding-left:16px;

     padding-right:16px;

border-left:#999 1px solid;

margin-left:-1px;

line-height:14px;

     font-size:12px;
     cursor: pointer;
     color:#F00
     }

   </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="details">
            <ul class="tab">
                <li id="1"><a href="#">demo1</a></li>
                <li id="2"><a href="#">demo2</a></li>
                <li id="3"><a href="#">demo3</a></li>
                <li id="4"><a href="#">demo4</a></li>
            </ul>

    <div id="tabs">
      <div id="tabs-1">
  <p>111111111111111111111111111111111111111111111111111111111111111111111</p>
</div>
<div id="tabs-2">
  <p>22222222222222222222222222222222222222222222222222222222222222222222222</p>
</div>
<div id="tabs-3">
<p>333333333333333333333333333333333333333333333333333333333333333333333333333333</p>
</div>
<div id="tabs-4">
   <p>rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</p>
    </div>
</div>
</div>

</form>
</body>
</html>

分享到：