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