1、实现的效果图
2.html代码
<
div
class
=
"cm-classify-content clearfix"
>
<
div
class
=
"cm-kind clearfix"
>
<
ul
class
=
"tab"
>
<
li
class
=
"li cur"
>
社交网络
<
i
class
=
"fa fa-angle-right pull-right"
></
i
></
li
>
<
li
class
=
"li"
>
电子商务
<
i
class
=
"fa fa-angle-right pull-right"
></
i
></
li
>
<
li
class
=
"li"
>
生活服务
<
i
class
=
"fa fa-angle-right pull-right"
></
i
></
li
>
<
li
class
=
"li"
>
休闲旅游
<
i
class
=
"fa fa-angle-right pull-right"
></
i
></
li
>
<
li
class
=
"li"
>
金融基金
<
i
class
=
"fa fa-angle-right pull-right"
></
i
></
li
>
<
li
class
=
"li"
>
其他
<
i
class
=
"fa fa-angle-right pull-right"
></
i
></
li
>
</
ul
>
<
div
class
=
"classify-content"
>
<
div
class
=
"con on"
>
<
span
>
微信
</
span
>
<
span
>
|
</
span
>
<
span
>
贴吧
</
span
>
<
span
>
|
</
span
>
<
span
>
微博
</
span
>
<
span
>
|
</
span
>
<
span
>
论坛
</
span
>
</
div
>
<
div
class
=
"con"
>
<
span
>
阿里巴巴
</
span
>
<
span
>
|
</
span
>
<
span
>
淘宝
</
span
>
<
span
>
|
</
span
>
<
span
>
京东
</
span
>
</
div
>
<
div
class
=
"con"
>
<
span
>
大众点评
</
span
>
<
span
>
|
</
span
>
<
span
>
58
</
span
>
<
span
>
|
</
span
>
<
span
>
赶集
</
span
>
</
div
>
<
div
class
=
"con"
>
<
span
>
影视数据
</
span
>
<
span
>
|
</
span
>
<
span
>
娱乐
</
span
>
<
span
>
|
</
span
>
<
span
>
机票
</
span
>
</
div
>
<
div
class
=
"con"
>
<
span
>
企业信息
</
span
>
<
span
>
|
</
span
>
<
span
>
理财
</
span
>
<
span
>
|
</
span
>
<
span
>
股票
</
span
>
</
div
>
<
div
class
=
"con"
>
<
span
>
工业制品
</
span
>
<
span
>
|
</
span
>
<
span
>
采购
</
span
>
<
span
>
|
</
span
>
<
span
>
咨询
</
span
>
</
div
>
</
div
>
</
div
>
</
div
>
3.css代码
.cm-classify-content
{
width
:
680px
;
height
:
300px
;
.cm-kind
{
border-right
:
1px
solid
white
;
height
:
300px
;
.tab
{
width
:
170px
;
float
:
left
;
display
:
block
;
border
:
1px
solid
black
;
margin
:
0
;
padding
:
0
;
li
{
cursor
:
pointer
;
border-top
:
1px
solid
rgba
(
154
,
210
,
237
,
0.4
);
border-left
:
0
;
font-size
:
14px
;
display
:
block
;
color
:
gray
;
padding
:
14.5px
15px
14.5px
25px
;
}
.cur
{
background
:
rgba
(
0
,
0
,
0
,
.075
);
}
}
.classify-content
{
width
:
500px
;
height
:
300px
;
border
:
1px
solid
gray
;
float
:
right
;
background-color
:
white
;
.on
{
display
:
block
;
}
.con
{
display
:
none
;
width
:
90%
;
margin-left
:
20px
;
span
{
margin-left
:
10px
;
cursor
:
pointer
;
}
}
}
}
}
4.js代码
<
script
src
=
"js/jquery.js"
>
<
/
script
>
<
script
>
$
(
document
).
ready
(
function
() {
$
(
".cm-kind .tab li"
).
hover
(
function
() {
// 获取相同class的集合
var
m
=
document
.
getElementsByClassName
(
"li"
);
var
n
=
document
.
getElementsByClassName
(
"con"
);
console
.
log
(
"m"
+
m);
// 获取集合的索引
var
index
=
$
(
".li"
).
index
(
$
(
this
));
console
.
log
(index);
// 添加和移除属性
$
(
".tab li"
).
eq
(
$
(
this
).
index
()).
addClass
(
"cur"
).
siblings
().
removeClass
(
'cur'
);
// 对应部分的隐藏和显示
$
(
".con"
).
hide
().
eq
(
$
(
this
).
index
()).
show
();
});
});
<
/
script
>