jquery-tabs面板

<!--引入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>