关闭

jquery-tabs面板

标签: tabsjqueryfunctiondivhtmlcss
979人阅读 评论(0) 收藏 举报

<!--引入jquery类库文件-->

<scriptsrc="js/jquery-1.7.1.min.js"></script>

<scriptsrc="js/jquery-ui-1.8.18.custom.min.js"></script>

<!--引入css样式类库-->

<link rel="stylesheet"type="text/css" href="css/jquery-ui-1.8.18.custom.css"/> /*juqery代码部分*/

<script>

//当窗体加载完毕的时候触发该匿名函数

$(function(){

$('#tabs').tabs({  //根据id选择器获取当前的id选择器的jquery对象

    event:'click',   //面板是展开的事件效果,默认是click效果

    fx:{

          opacity:'toggle'//透明度  从无到有的一个动画效果

        }

      selectd:1    //默认选中模板

  });

 $('#tabs').tabs('remove',2);//移除面板  

  //$('#tabs').tabs('add','tab-4.html','four');//添加一个面板

});

</script>

 

/*html代码部分*/

<h1>模拟tabs效果</h1>

  <div id='tabs'>

     <ul>

        <li><a href='#tab-1'>面板1</a></li>

        <li><a href='#tab-2'>面板2</a></li>

        <li><a href='#tab-3'>面板3</a></li>

     </ul>

               <div id="tab-1">

                新闻:齐天大圣

                 </div>

                <divid="tab-2">

                新闻:齐天大圣-啊啊

                  </div>

                <divid="tab-3">

                新闻:齐天大圣-拜拜

                  </div>

 </div> 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:52035次
    • 积分:1111
    • 等级:
    • 排名:千里之外
    • 原创:60篇
    • 转载:5篇
    • 译文:0篇
    • 评论:3条