用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

标签切换

2016-05-30 作者: lijinbo举报

[javascript]代码库

<style type="text/css">
    *{padding:0px;margin:0px;}
    #nav{display:block;}
    .clear{clear:both;}
    ul li{list-style:none;
           float:left;
           margin:0 5px;
           width:100px;
           }
    #content div{
              display:none;
              width:300px;
              height:100px;
              background:#eee;
              }  
   #content div.cur{
         display:block;
      }
#nav .cur a{
  color:#f00;
  }  
    </style>
$("document").ready(function(){
                        $("#nav li").click(function(){
                                 
                                var i=$(this).attr('date-i')
                                $("#nav li").removeClass('cur');
                                $(this).addClass('cur');
                                $("#content div").removeClass('cur');
                                $("#a_"+i).addClass('cur');
                                                })  
                             })
<body>
    <ul id="nav">
        <li class="cur" data-i='1'><a href="javascript:void(0);">jquery</a></li>
        <li data-i='2'><a href="javascript:void(0);">js</a></li>
        <li data-i='3'><a href="javascript:void(0);">linus</a></li>
    </ul>
    <div class="clear"></div>
    <div id="content">
        <div id="a_1" class="cur">jquery</div>
        <div id="a_2">js</div>
        <div id="a_3">linus</div>
    </div>   
</body>


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...