鼠标移动到li上显示不同的内容

fangsky 2018-01-15 05:14:01



<div class="col-sm-3  vertical_line">

	<ul class="navul">

		<li><a href="index.php?id=product&cate=cllgj">分类1</a>

                      <div.>分类1介绍的内容，开始是隐藏的。鼠标移动到li上把此块内容显示在下面的col-sm-9上。</div>

                </li>

                <li><a href="index.php?id=product&cate=cllgj">分类2</a>

                      <div.>分类2介绍的内容，开始是隐藏的。鼠标移动到li上把此块内容显示在下面的col-sm-9上。</div>

                </li>

                <li><a href="index.php?id=product&cate=cllgj">分类n</a>

                      <div.>分类n介绍的内容，开始是隐藏的。</div>

                </li>

        </ul>

</div>

<div class="col-sm-9">

          鼠标移动到上面的每个li上，这里的内容跟着变化。

</div>

用jq如何实现比较好，谢谢

...全文

782 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2018-01-15

打赏
举报

引用 2 楼 fangsky 的回复:

[quote=引用 1 楼 jslang 的回复:]

内容我要显示在下面那个DIV里。[/quote]


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
.navul div {
	display: none;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>

<div class="col-sm-3  vertical_line">
	<ul class="navul">
		<li><a href="index.php?id=product&cate=cllgj">分类1</a>
                      <div>分类1介绍的内容，开始是隐藏的。鼠标移动到li上把此块内容显示在下面的col-sm-9上。</div>
                </li>
                <li><a href="index.php?id=product&cate=cllgj">分类2</a>
                      <div>分类2介绍的内容，开始是隐藏的。鼠标移动到li上把此块内容显示在下面的col-sm-9上。</div>
                </li>
                <li><a href="index.php?id=product&cate=cllgj">分类n</a>
                      <div>分类n介绍的内容，开始是隐藏的。</div>
                </li>
        </ul>
</div>
<div class="col-sm-9">
          鼠标移动到上面的每个li上，这里的内容跟着变化。
</div>
<script type="text/javascript">
$(function(){
	$(".navul li").mouseenter(function(event){
		$(".col-sm-9").html($(this).find("div").html());
	});
});
</script>
</body>
</html>

fangsky 2018-01-15

打赏
举报

引用 1 楼 jslang 的回复:

内容我要显示在下面那个DIV里。

天际的海浪 2018-01-15

打赏
举报


<style type="text/css">
.navul div {
	display: none;
}
.navul li:hover div {
	display: block;
}
</style>
</head>
<body>

<div class="col-sm-3  vertical_line">
	<ul class="navul">
		<li><a href="index.php?id=product&cate=cllgj">分类1</a>
                      <div>分类1介绍的内容，开始是隐藏的。鼠标移动到li上把此块内容显示在下面的col-sm-9上。</div>
                </li>
                <li><a href="index.php?id=product&cate=cllgj">分类2</a>
                      <div>分类2介绍的内容，开始是隐藏的。鼠标移动到li上把此块内容显示在下面的col-sm-9上。</div>
                </li>
                <li><a href="index.php?id=product&cate=cllgj">分类n</a>
                      <div>分类n介绍的内容，开始是隐藏的。</div>
                </li>
        </ul>
</div>
<div class="col-sm-9">
          鼠标移动到上面的每个li上，这里的内容跟着变化。
</div>