【天天面试3】进入复试了,这个题目不会做(上海),请高手们帮帮忙啊!!! 有很多种方法都可以实现这种tab control效果。最简单的是根据不同的页面设置选中和未选中状态,菜单样式就在css里面设置好了 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TablePanel演示</title> <style type="text/css"> *{font-size:12px;} ul{margin:0px; padding:0px;} .tabPannel{width:300px; border:1px solid #666666; float:left;} .tabPannel .tabContainer{width:300px;float:left; border-bottom:1px solid #666666;} .tabPannel .tabContainer li{list-style-type:none; width:50px; height:30px; line-height:30px; border-right:1px solid #666666; text-align:center; float:left;} .tabPannel .tabContainer .mouseover{background-color:#809CE1;} .tabPannel .tabContainer .mouseout{background-color:#118FE9;} .tabPannel .tabContentContainer{width:290px; height:200px; float:left;} </style> <script type="text/javascript" src="../Tom.js"></script> </head> <body> <div class="tabPannel"> <div class="tabContainer"> <ul> <li id="tab1" tabContentId="tabContent1" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">体育</li> <li id="tab2" tabContentId="tabContent2" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">手机</li> <li id="tab3" tabContentId="tabContent3" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">财经</li> <li id="tab4" tabContentId="tabContent4" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">足球</li> </ul> </div> <div id="tabContent1" class="tabContentContainer" style="display:block;"> <br/> 体育 </div> <div id="tabContent2" class="tabContentContainer" style="display:none"> <br> 手机 </div> <div id="tabContent3" class="tabContentContainer" style="display:none"> <br> 财经 </div> <div id="tabContent4" class="tabContentContainer" style="display:none"> <br> 足球 </div> </div> <script> var tabIdArrary = new Array("tab1", "tab2", "tab3", "tab4"); new Tom.Widget.TabPannel(tabIdArrary); </script> </body></html>tom.js/** * 作者:枯井 * 日期:2007-12-08 * 描述:对元素进行包装,生成TabPanel *//// <summary>/// 构造函数需要传入一个数组,其中存储了需要包装的系了元素ID/// </summary>Tom.Widget.TabPannel = function(tabIdArray){ this.tabArray = new Array(); for(var i = 0; i < tabIdArray.length; i++) { this.tabArray[i] = document.getElementById(tabIdArrary[i]); if(!this.tabArray[i]) { alert("ID为" + tabIdArray[i] + "的元素不存在"); return; } } var tabPannel = this; for(var i = 0; i < tabPannel.tabArray.length; i++) { tabPannel.tabArray[i].onmouseover = function(event) { var srcElement; if(window.event) { srcElement = window.event.srcElement; } else { srcElement = event.target; } var tabContent; for(var i = 0; i < tabPannel.tabArray.length; i++) { tabContent = document.getElementById(tabPannel.tabArray[i].attributes.getNamedItem("tabContentId").nodeValue); if(srcElement.id != tabPannel.tabArray[i].id) { tabContent.style.display = "none"; } else { tabContent.style.display = "block"; } } srcElement.className = srcElement.attributes.getNamedItem("CssClassMouseover").nodeValue; } tabPannel.tabArray[i].onmouseout = function(event) { var srcElement; if(window.event) { srcElement = window.event.srcElement; } else { srcElement = event.target; } srcElement.className = srcElement.attributes.getNamedItem("CssClassMouseout").nodeValue; } }} 可以用JAVASCRIPT来实现点击选项卡 那个选项卡按钮切换CSS样式 其它选项卡换回CSS样式内容用AJAX来读取 或则直接用DIV 显示隐藏来实现我说的内容没有涉及控件 因为我还不太会使用控件 好像可以用MutilView来做,加上CSS样式表就可以做到类似的效果了.看一本书上做过 效果不难,如果不涉及到数据的更换的话。function onclickchange(obj){obj.classname="classname1";}就应该OK的 最土的方法使用最原始的Ajaxxmlhttp然后使用vs上的一般处理程序点击选项卡的时候,发出请求,在一般处理程序中将那个Tab页的内容使用整理好整个回传回来至于Tab页也是最土的方法Tab页是一个大DIV中的几个链接。。A标签可以设置样式背景图的,然后下面显示的是一个DIV,这个DIV只管接受来自一般处理程序的响应文本就是了至于响应文本的内容,不同的A标签发不出同的请求就是了=。=不过这样做出来很粗糙吧 谢谢大家的指点哦!!CSDN还是好人多呀!!郁闷,住的地方宽带还没拉上,真不方便,一会回住处了试验一下!!2楼大哥,明天记得回帖哦! 可以直接使用ajax的TabContainer控件来实现 装上dreamweavercs3就模板可以用! 主要就是AJAX局部刷新,估计考试也就是考这一点 用.NetAjaxTookit里面的tabContainer控件(这个比较简单)或者用js实现 介绍个第3方控件给你Telerik.RadControl tab切换?你面试的什么公司啊,ajaxcontroltoolkit里根本就有这个控件的么 用JAVASCRIPT就可以,点击某个选项卡 切换相应CSS样式 其它选项卡换回默认CSS样式具体的数据和内容可以用AJAX来读取 或则直接写到页面上,默认css帮助隐藏 tab菜单,不过做过,见过别人做过,div+css,使用js控制 我在页面上做了个可以下拉的菜单,是用css和js做的,,然后又在页面上拖了个AJAX开源控件包里的一个tab控件。现在我遇到的问题是,,我要点击菜单上下拉菜单的某一项时,要在tab控件上增加一个tab并显示内容。。这个过程要如何实现?而且,我先做了菜单,然后往页面上拖scriptmanager和tab控件时(都是ajax控件),,页面提示出错,我该怎么处理? 求助:ds._TbmXueShengBiao.OrderBy 排序 .NET Micro Framework 4.1 SDK 问一个拆句子的问题 偶尔出现 “无法找到表 1” 的错误 不知是为什么? 求用c#写的万年历代码 小问题 寻求帮助关于GB2312和UTF-8转换的问题 请问,这是个什么怪异现象 關于類型轉換的問題 获取缓存行数 缓存是没问题的 问什么 会报错呢 使用 DevExpress 控件?? Windows服务路径
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TablePanel演示</title>
<style type="text/css">
*{font-size:12px;}
ul{margin:0px; padding:0px;}
.tabPannel{width:300px; border:1px solid #666666; float:left;}
.tabPannel .tabContainer{width:300px;float:left; border-bottom:1px solid #666666;}
.tabPannel .tabContainer li{list-style-type:none; width:50px; height:30px; line-height:30px; border-right:1px solid #666666; text-align:center; float:left;}
.tabPannel .tabContainer .mouseover{background-color:#809CE1;}
.tabPannel .tabContainer .mouseout{background-color:#118FE9;}
.tabPannel .tabContentContainer{width:290px; height:200px; float:left;}
</style>
<script type="text/javascript" src="../Tom.js"></script>
</head>
<body>
<div class="tabPannel">
<div class="tabContainer">
<ul>
<li id="tab1" tabContentId="tabContent1" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">体育</li>
<li id="tab2" tabContentId="tabContent2" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">手机</li>
<li id="tab3" tabContentId="tabContent3" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">财经</li>
<li id="tab4" tabContentId="tabContent4" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">足球</li>
</ul>
</div>
<div id="tabContent1" class="tabContentContainer" style="display:block;">
<br/>
体育
</div>
<div id="tabContent2" class="tabContentContainer" style="display:none">
<br>
手机
</div>
<div id="tabContent3" class="tabContentContainer" style="display:none">
<br>
财经
</div>
<div id="tabContent4" class="tabContentContainer" style="display:none">
<br>
足球
</div>
</div>
<script>
var tabIdArrary = new Array("tab1", "tab2", "tab3", "tab4");
new Tom.Widget.TabPannel(tabIdArrary);
</script>
</body>
</html>
tom.js
/**
* 作者:枯井
* 日期:2007-12-08
* 描述:对元素进行包装,生成TabPanel
*//// <summary>
/// 构造函数需要传入一个数组,其中存储了需要包装的系了元素ID
/// </summary>
Tom.Widget.TabPannel = function(tabIdArray)
{
this.tabArray = new Array();
for(var i = 0; i < tabIdArray.length; i++)
{
this.tabArray[i] = document.getElementById(tabIdArrary[i]);
if(!this.tabArray[i])
{
alert("ID为" + tabIdArray[i] + "的元素不存在");
return;
}
}
var tabPannel = this;
for(var i = 0; i < tabPannel.tabArray.length; i++)
{
tabPannel.tabArray[i].onmouseover = function(event)
{
var srcElement;
if(window.event)
{
srcElement = window.event.srcElement;
}
else
{
srcElement = event.target;
}
var tabContent;
for(var i = 0; i < tabPannel.tabArray.length; i++)
{
tabContent = document.getElementById(tabPannel.tabArray[i].attributes.getNamedItem("tabContentId").nodeValue);
if(srcElement.id != tabPannel.tabArray[i].id)
{
tabContent.style.display = "none";
}
else
{
tabContent.style.display = "block";
}
} srcElement.className = srcElement.attributes.getNamedItem("CssClassMouseover").nodeValue;
}
tabPannel.tabArray[i].onmouseout = function(event)
{
var srcElement;
if(window.event)
{
srcElement = window.event.srcElement;
}
else
{
srcElement = event.target;
}
srcElement.className = srcElement.attributes.getNamedItem("CssClassMouseout").nodeValue;
}
}}
点击选项卡 那个选项卡按钮切换CSS样式 其它选项卡换回CSS样式内容用AJAX来读取 或则直接用DIV 显示隐藏来实现我说的内容没有涉及控件 因为我还不太会使用控件
function onclickchange(obj){
obj.classname="classname1";
}就应该OK的
使用最原始的Ajaxxmlhttp然后使用vs上的一般处理程序
点击选项卡的时候,发出请求,在一般处理程序中将那个Tab页的内容使用整理好整个回传回来至于Tab页也是最土的方法Tab页是一个大DIV中的几个链接。。A标签可以设置样式背景图的,然后下面显示的是一个DIV,这个DIV只管接受来自一般处理程序的响应文本就是了至于响应文本的内容,不同的A标签发不出同的请求就是了=。=不过这样做出来很粗糙吧
郁闷,住的地方宽带还没拉上,真不方便,一会回住处了试验一下!!2楼大哥,明天记得回帖哦!
或者用js实现
具体的数据和内容可以用AJAX来读取 或则直接写到页面上,默认css帮助隐藏
现在我遇到的问题是,,我要点击菜单上下拉菜单的某一项时,要在tab控件上增加一个tab并显示内容。。
这个过程要如何实现?而且,我先做了菜单,然后往页面上拖scriptmanager和tab控件时(都是ajax控件),,页面提示出错,我该怎么处理?