81,092
社区成员
发帖
与我相关
我的任务
分享实现tab页效果及传入参数问题。求救！
请问：
如果实现tab页（选项卡）效果，最好给出源码，还有，在点击tab页的时候，如何传入参数呢，页面里面的内容要根据参数进行更新，从数据库中读取不同的内容。
效果如：http://www.blueidea.com/tech/web/2006/3599_2.asp 就是不知道怎么可以把javascritp中的参数转换成成<%%>中的参数。
有人说用ajax，由于是新手，请大家给出对应的例子。谢谢。
我baidu的同时等待着你的答案！
如果实现tab页（选项卡）效果，最好给出源码，还有，在点击tab页的时候，如何传入参数呢，页面里面的内容要根据参数进行更新，从数据库中读取不同的内容。
效果如：http://www.blueidea.com/tech/web/2006/3599_2.asp 就是不知道怎么可以把javascritp中的参数转换成成<%%>中的参数。
有人说用ajax，由于是新手，请大家给出对应的例子。谢谢。
我baidu的同时等待着你的答案！
...全文
请发表友善的回复…
发表回复
hys13love 2007-11-27
- 打赏
- 举报
例子啊,救命用
邮箱:hziee_03071234@163.com
邮箱:hziee_03071234@163.com
jdsnhan 2007-10-17
- 打赏
- 举报
我用iframe了,虽然不好看,但是能实现了.各位的方法我没吸收.
china2001ok 2007-10-11
- 打赏
- 举报
你把要传的动态参数存入到一个hidden中 然后在连接到别的页面时post传过去
jdsnhan 2007-10-11
- 打赏
- 举报
谢谢 joejoe1991 的答案。
你的答案有所缺陷，还没有动态传入参数啊。不能把o,n 这两个参数作为sql查询的条件使用啊。
你的答案有所缺陷，还没有动态传入参数啊。不能把o,n 这两个参数作为sql查询的条件使用啊。
fengxu 2007-10-11
- 打赏
- 举报
把每个卡片的内容多读取出来，再用JS调用
yaray 2007-10-02
- 打赏
- 举报
自己到网站下载吧: http://extjs.com
ITshu 2007-10-02
- 打赏
- 举报
ding
joejoe1991 2007-10-01
- 打赏
- 举报
<!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=gb2312" />
<title>标签示例</title>
<style type="text/css">
<!--
body { font-size:14px; font-family:"宋体"}
ol li { margin:8px}
#con { font-size:12px; width:600px; margin:0 auto}
#tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}
#tags li { float:left; margin-right:1px; background:url(tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
#tags li a { text-decoration:none; float:left; background:url(tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
#tags li.emptyTag { width:4px; background:none}
#tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
#tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
#tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;width:100%;}
.tagContent { background:url(bg.gif) repeat-x; height:350px; padding:10px; color:#474747; width:576px; display:none}
#tagContent div.selectTag{ display:block}
.tagFrame{
background:url(bg.gif) repeat-x;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var selectedtag;
var selectedcon;
function doClick_tab(o,n){
var parent=event.srcElement.parentNode;
parent.className="selectTag";
var con=document.getElementById("tab_con"+n);
con.style.display="block";
if (selectedtag!=null && selectedcon!=null)
{
selectedtag.className="li";
selectedcon.style.display="none";
}else{
document.getElementById("tab1").className="li";
document.getElementById("tab_con1").style.display="none";
}
selectedtag=parent;
selectedcon=con;
}
//-->
</SCRIPT>
</head>
<body>
<div id="con">
<ul id="tags">
<li class="selectTag" id="tab1"><a href="#" onClick="javascript:doClick_tab(this,1)">基本信息</a></li>
<li id="tab2"><a href="#" onClick="javascript:doClick_tab(this,2)">库存信息111111</a></li>
<li id="tab3"><a href="#" onClick="javascript:doClick_tab(this,3)">采购信息</a></li>
<li id="tab4"><a href="#" onClick="javascript:doClick_tab(this,4)">销售信息</a></li>
<li id="tab5"><a href="#" onClick="javascript:doClick_tab(this,5)">另一个</a></li>
</ul>
<div id="tab_con1" style="display:block;">111111111111111111111</div>
<div id="tab_con2" style="display:none;">222222222222222222</div>
<div id="tab_con3" style="display:none;">33333333333333333333</div>
<div id="tab_con4" style="display:none;">444444444444444</div>
<div id="tab_con5" style="display:none;">555555555555555555555555555555</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标签示例</title>
<style type="text/css">
<!--
body { font-size:14px; font-family:"宋体"}
ol li { margin:8px}
#con { font-size:12px; width:600px; margin:0 auto}
#tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}
#tags li { float:left; margin-right:1px; background:url(tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
#tags li a { text-decoration:none; float:left; background:url(tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
#tags li.emptyTag { width:4px; background:none}
#tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
#tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
#tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;width:100%;}
.tagContent { background:url(bg.gif) repeat-x; height:350px; padding:10px; color:#474747; width:576px; display:none}
#tagContent div.selectTag{ display:block}
.tagFrame{
background:url(bg.gif) repeat-x;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var selectedtag;
var selectedcon;
function doClick_tab(o,n){
var parent=event.srcElement.parentNode;
parent.className="selectTag";
var con=document.getElementById("tab_con"+n);
con.style.display="block";
if (selectedtag!=null && selectedcon!=null)
{
selectedtag.className="li";
selectedcon.style.display="none";
}else{
document.getElementById("tab1").className="li";
document.getElementById("tab_con1").style.display="none";
}
selectedtag=parent;
selectedcon=con;
}
//-->
</SCRIPT>
</head>
<body>
<div id="con">
<ul id="tags">
<li class="selectTag" id="tab1"><a href="#" onClick="javascript:doClick_tab(this,1)">基本信息</a></li>
<li id="tab2"><a href="#" onClick="javascript:doClick_tab(this,2)">库存信息111111</a></li>
<li id="tab3"><a href="#" onClick="javascript:doClick_tab(this,3)">采购信息</a></li>
<li id="tab4"><a href="#" onClick="javascript:doClick_tab(this,4)">销售信息</a></li>
<li id="tab5"><a href="#" onClick="javascript:doClick_tab(this,5)">另一个</a></li>
</ul>
<div id="tab_con1" style="display:block;">111111111111111111111</div>
<div id="tab_con2" style="display:none;">222222222222222222</div>
<div id="tab_con3" style="display:none;">33333333333333333333</div>
<div id="tab_con4" style="display:none;">444444444444444</div>
<div id="tab_con5" style="display:none;">555555555555555555555555555555</div>
</div>
</body>
</html>
jdsnhan 2007-09-30
- 打赏
- 举报
等了好几天了，找了好几天了，还是没有合适。
继续等，继续找。
大家别光给概念性的东西，最好给个例子。
继续等，继续找。
大家别光给概念性的东西，最好给个例子。
iskyshop 2007-09-26
- 打赏
- 举报
这个所谓的tab其实很多用的就是div，这样更简单些，如果用ajax也很简单，建议用protype
jdsnhan 2007-09-26
- 打赏
- 举报
自己顶！找了一圈，没找到合适的。期盼高手给个例子。
zjf405 2007-09-25
- 打赏
- 举报
路过，mark
jdsnhan 2007-09-25
- 打赏
- 举报
用ajax也行，需要大家给提供个小例子，最好，连tab，带传参都有的。
apple20001998 2007-09-25
- 打赏
- 举报
如果不用ajax，那就不能用JS来控制页面显示效果了，因为从后台读取数据后，页面必然会刷新，一刷新页面就恢复到最初状态了。
最好是参照分页的方法，在页面HTTP请求中加入page参数
比如：mypage.jsp?page=
用这个参数控制页面的显示效果，同时从后台读取数据
tag标签的联接改成如下形式
mypage.jsp?page=1、mypage.jsp?page=2、mypage.jsp?page=3
最好是参照分页的方法，在页面HTTP请求中加入page参数
比如：mypage.jsp?page=
用这个参数控制页面的显示效果，同时从后台读取数据
tag标签的联接改成如下形式
mypage.jsp?page=1、mypage.jsp?page=2、mypage.jsp?page=3
wshsm 2007-09-25
- 打赏
- 举报
可以用YUI-EXT提供的控件，里面有详细的例子
