我想要这种效果的，有没有具体的代码和具体的解析，我用的是VS2010的asp.net
这种效果就是可以在同一个浏览器窗口中显示不止一个页面，注意，不是说做个浏览器出来，而是做出这种效果出来...
这种效果就是可以在同一个浏览器窗口中显示不止一个页面，注意，不是说做个浏览器出来，而是做出这种效果出来
展开
展开全部
那就是一个简单的tab效果的啊
下面是一个demo，把引用的jquery换成你的路径
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tab Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{ margin: 0; padding: 0;}
.container{ width: 1000px; height: auto; margin: 0 auto; border: 1px solid #4e4e4e;}
.tab-head{ width: 100%; height: 50px;border-bottom: 1px solid #4e4e4e; }
.tab-head ul{ width: 100%; height: 50px; list-style: none;}
.tab-head ul .normal-li{ width: 150px; height: 50px; float: left; line-height: 50px; text-align: center; font-family: "Microsoft YaHei"; font-weight: bold; font-size: 20px; background-color: #fff; color: #111; cursor: pointer;}
.tab-head ul .selected-li{ width: 150px; height: 50px; float: left; line-height: 50px; text-align: center; font-family: "Microsoft YaHei"; font-weight: bold; font-size: 20px; background-color: #111; color: #fff;}
.tab-content{ width: 100%; height: auto;}
.tab-content ul{ width:100%; height: auto; list-style: none;}
.tab-content ul li{ width:100%; height: 500px; display:none; }
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var currentIndex=0;
$(document).ready(function(){
$(".tab-head ul li").click(function(){
var index=$(this).index();
if(currentIndex!=index) {
currentIndex=index;
$(this).removeClass("normal-li").addClass("selected-li");
$(this).siblings().removeClass("selected-li").addClass("normal-li");
var contents=$(".tab-content").find("li");
$(contents[index]).show();
$(contents[index]).siblings().hide();
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="tab-head">
<ul>
<li class="selected-li">导航</li>
<li class="normal-li">推荐</li>
<li class="normal-li">购物</li>
<li class="normal-li">视频</li>
</ul>
</div>
<div class="tab-content">
<ul>
<li style="background-color: antiquewhite; display: block;">导航</li>
<li style="background-color:antiquewhite ;">推荐</li>
<li style="background-color:antiquewhite ;">购物</li>
<li style="background-color:antiquewhite ;">视频</li>
</ul>
</div>
</div>
</body>
</html>
更多追问追答
追问
非常感谢，不过还是有两个问题，一个是jquery.min.js找不到文件，我的路径不知道怎么搞，还有一个是$未定义，我是新手，很抱歉。然后，我想要的这种效果是动态的，比如说我随便打开一个链接都可以增加一个窗口
追答
jquery.min.js文件，你要引用你自己项目里面的jquery库啊
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
AiPPT
2024-09-19 广告
随着AI技术的飞速发展，如今市面上涌现了许多实用易操作的AI生成工具1、简介：AiPPT: 这款AI工具智能理解用户输入的主题，提供“AI智能生成”和“导入本地大纲”的选项，生成的PPT内容丰富多样，可自由编辑和添加元素，图表类型包括柱状图...
点击进入详情页
本回答由AiPPT提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
