div+css 如何实现 点击A标签，显示div1，点击B标签，显示div2并同时隐藏div1
为了做一个导航菜单如题点击系列一，在导航文字的下方出现系列一的详细项目点击系列迩，在导航文字的下方出现系列二的详细项目div1和div2在页面中的同一个位置如图...
为了做一个导航菜单
如题
点击 系列一，在导航文字的下方出现系列一的详细项目
点击 系列迩，在导航文字的下方出现系列二的详细项目
div1和div2在页面中的同一个位置
如图 展开
如题
点击 系列一，在导航文字的下方出现系列一的详细项目
点击 系列迩，在导航文字的下方出现系列二的详细项目
div1和div2在页面中的同一个位置
如图 展开
1个回答
展开全部
这个效果是靠CSS和JS结合做出来的。如下：
<!DOCTYPE html>
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
#nav{margin:50px;position:relative;}
#nav li.current a{color:#f60;}
#nav li{float:left;padding:0 20px;height:25px;}
#nav li a{font:14px/25px '宋体';font-weight:bold;color:#000;text-decoration:none;}
#nav li ul{display:none;position:absolute;left:0;top:25px;width:500px;height:25px;border:1px solid #ccc;text-align:center;}
#nav li ul li{float:none;display:inline-block;padding:2px 0;}
#nav li ul li a{display:inline-block;padding:0 15px;font:12px/12px '宋体';font-weight:normal;border-right:1px solid #000;color:#000 !important;}
#nav li ul li a:hover{text-decoration:underline;}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
$('#nav > li').hover(function(){ //hover是鼠标悬浮，click是鼠标点击。
$(this).addClass('current').siblings('li').removeClass('current');
$('#nav > li > ul').hide();
$(this).find('ul').show();
})
})
</script>
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品二</a></li>
<li><a href="#">产品三</a></li>
<li><a href="#">产品四</a></li>
</ul>
</li>
<li><a href="#">服务</a>
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务三</a></li>
<li><a href="#">服务四</a></li>
</ul>
</li>
<li><a href="#">支持</a>
<ul>
<li><a href="#">热线扶持</a></li>
<li><a href="#">在线客服</a></li>
</ul>
</li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
#nav{margin:50px;position:relative;}
#nav li.current a{color:#f60;}
#nav li{float:left;padding:0 20px;height:25px;}
#nav li a{font:14px/25px '宋体';font-weight:bold;color:#000;text-decoration:none;}
#nav li ul{display:none;position:absolute;left:0;top:25px;width:500px;height:25px;border:1px solid #ccc;text-align:center;}
#nav li ul li{float:none;display:inline-block;padding:2px 0;}
#nav li ul li a{display:inline-block;padding:0 15px;font:12px/12px '宋体';font-weight:normal;border-right:1px solid #000;color:#000 !important;}
#nav li ul li a:hover{text-decoration:underline;}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
$('#nav > li').hover(function(){ //hover是鼠标悬浮，click是鼠标点击。
$(this).addClass('current').siblings('li').removeClass('current');
$('#nav > li > ul').hide();
$(this).find('ul').show();
})
})
</script>
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品二</a></li>
<li><a href="#">产品三</a></li>
<li><a href="#">产品四</a></li>
</ul>
</li>
<li><a href="#">服务</a>
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务三</a></li>
<li><a href="#">服务四</a></li>
</ul>
</li>
<li><a href="#">支持</a>
<ul>
<li><a href="#">热线扶持</a></li>
<li><a href="#">在线客服</a></li>
</ul>
</li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
