jquery 通用选项卡

【Jquery版本】

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

< meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8"  />

< script  type = "text/javascript"  src = "./js/jquery-1.6.2.min.js" ></ script  >

< title >  jquery 通用选项卡 </ title  >

< style  type = "text/css"  >

        ul,  li  {  margin  : 0 ;  padding : 0 ;}

        li {  list-style  : none ;}

        .divClear {  clear  : both ; }

        .non {  display  :  none ;}

      

        #newsContainer {  width  : 500px ;  line-height :  30px ; }

        #newsContainer ul {  height : 30px  ;  background  : #ccc ; }

        #newsContainer ul li  {  width  : 200px ;  display : block ;  float : left  ; }

        #newsContainer .cur {  background : #F00  ;  font-size  : 24px ;}

        #newsContainer .content {  width : 500px  ;  height  : 200px ;  border : 1px solid #F00 ;}

</ style >

</ head >

< body >

        < div  id  = "newsContainer" >

       < ul  id = "titleContainerJsId" >

              < li  class = "cur"  >< a  href = ""  > 行业新闻 </  a ></ li  >

             < li ><  a  href  = "" >  国内新闻 </ a  ></ li >

         </ ul >

         < div  class = "divClear"  ></ div >

         < div  class = "content"  id = "contentContainerJsId" >

              < div >  行业新闻内容行业新闻内容  </ div >

             < div  class = "non"  > 国内新闻内容国内新闻内容  </ div >

         </ div >

     </ div  >

   

        < script  type = "text/javascript"  >

            function  showDisplay (titleId, contentId) {

                    var  li = $( "#"  +titleId).children( "li" );

                  li.each(  function (i){

                        $(  this ).bind( "mouseover"  ,  function (){

                              li.removeClass(  "cur" ).eq(i).addClass( "cur"  );

                              $(  "#" +contentId).children().hide().eq(i).show();

                        });

                  });

            };

            

            showDisplay(  "titleContainerJsId" ,  "contentContainerJsId"  );

     </ script  >

</ body >

</ html >

123宝贝网(www.123baby.net)