这张图片的菜单功能叫什么菜单？如何用div+css实现之？最好html与css代码分离！
展开全部
我有现成的，自己写的，需要加载jquery，html、css、js都分离
一个页面可以放多个，只要class=“ai_tab_change”
可以通过这个地址看效果
http://advanq.cn/advan/test.html
代码如下
==========================
<!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" />
<title>无标题文档</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style>
body{ font-size:9pt;}
.ai_tab_change{ width:600px;}
.ai_tab_change .ai_label{ width:100%; height:30px; line-height:30px;}
.ai_tab_change .ai_label ul{ float:left; padding:0; margin:0; list-style:none;}
.ai_tab_change .ai_label li{ padding:0 10px; color:#000; background-color:#f4f4f4; float:left;background-color:#9c0; color:#fff; cursor:pointer;}
.ai_tab_change .ai_label li.cur{background-color:#f4f4f4; color:#000;}/*标签选中状态样式*/
.ai_tab_change .ai_content_list{ width:500px; background-color:#f4f4f4; min-height:400px; height:auto!important; height:400px;}
.ai_tab_change .ai_content{ display:none; padding:10px;}
</style>
<script>
$(function(){
$(".ai_tab_change .ai_label").find("li:eq(0)").addClass("cur");//加载页面选中第一个标签
$(".ai_tab_change .ai_content_list").find(".ai_content:eq(0)").show();//加载页面显示第一个标签
$(".ai_label li").click(function(){//点击标签运行的程序
$(this).addClass("cur").siblings("li").removeClass("cur")//改变标签状态.parent().parent().next(".ai_content_list").find(".ai_content:eq("+$(this).index()+")").show().siblings().hide();//改变内容显示状态
});
})
</script>
</head>
<body>
<div class="ai_tab_change">
<div class="ai_label"><ul>
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul></div>
<div class="ai_content_list">
<div class="ai_content">
测试内容1
</div>
<div class="ai_content">
测试内容2
</div>
<div class="ai_content">
测试内容3
</div>
</div>
</div>
<br /><br /><br />
<div class="ai_tab_change">
<div class="ai_label"><ul>
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul></div>
<div class="ai_content_list">
<div class="ai_content">
测试内容1
</div>
<div class="ai_content">
测试内容2
</div>
<div class="ai_content">
测试内容3
</div>
</div>
</div>
</body>
</html>
一个页面可以放多个，只要class=“ai_tab_change”
可以通过这个地址看效果
http://advanq.cn/advan/test.html
代码如下
==========================
<!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" />
<title>无标题文档</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style>
body{ font-size:9pt;}
.ai_tab_change{ width:600px;}
.ai_tab_change .ai_label{ width:100%; height:30px; line-height:30px;}
.ai_tab_change .ai_label ul{ float:left; padding:0; margin:0; list-style:none;}
.ai_tab_change .ai_label li{ padding:0 10px; color:#000; background-color:#f4f4f4; float:left;background-color:#9c0; color:#fff; cursor:pointer;}
.ai_tab_change .ai_label li.cur{background-color:#f4f4f4; color:#000;}/*标签选中状态样式*/
.ai_tab_change .ai_content_list{ width:500px; background-color:#f4f4f4; min-height:400px; height:auto!important; height:400px;}
.ai_tab_change .ai_content{ display:none; padding:10px;}
</style>
<script>
$(function(){
$(".ai_tab_change .ai_label").find("li:eq(0)").addClass("cur");//加载页面选中第一个标签
$(".ai_tab_change .ai_content_list").find(".ai_content:eq(0)").show();//加载页面显示第一个标签
$(".ai_label li").click(function(){//点击标签运行的程序
$(this).addClass("cur").siblings("li").removeClass("cur")//改变标签状态.parent().parent().next(".ai_content_list").find(".ai_content:eq("+$(this).index()+")").show().siblings().hide();//改变内容显示状态
});
})
</script>
</head>
<body>
<div class="ai_tab_change">
<div class="ai_label"><ul>
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul></div>
<div class="ai_content_list">
<div class="ai_content">
测试内容1
</div>
<div class="ai_content">
测试内容2
</div>
<div class="ai_content">
测试内容3
</div>
</div>
</div>
<br /><br /><br />
<div class="ai_tab_change">
<div class="ai_label"><ul>
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul></div>
<div class="ai_content_list">
<div class="ai_content">
测试内容1
</div>
<div class="ai_content">
测试内容2
</div>
<div class="ai_content">
测试内容3
</div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div class="box">
<div class="snav">
<ul>
<li class="active"><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
</ul>
</div>
<div class="nr">
<div class="active">里面就是内容</div>
<div class="">里面就是内容</div>
<div class="">里面就是内容</div>
<div class="">里面就是内容</div>
</div>
</div>
<div class="snav">
<ul>
<li class="active"><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
</ul>
</div>
<div class="nr">
<div class="active">里面就是内容</div>
<div class="">里面就是内容</div>
<div class="">里面就是内容</div>
<div class="">里面就是内容</div>
</div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
选项卡，用JS实现。随便百度下就有
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
tab 选项卡 JS 功能
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
