csdn社区页面中的左侧实现思路

zjailanzj 2011-08-04 04:48:57

咱们登陆csdn社区的时候，页面左侧是登陆人的基本信息，下面分为2个页签，【论坛】【经典】请问这个功能是如何实现的,或者有实现这种切换的js代码希望各位贴出来支持下，我需要做一个类似QQ的里面嵌套网页，网页内容基本就像社区左侧那一快，不知道【论坛】【经典】是怎么处理的，效率也要好一点。求思路，求类似切换的简单代码

...全文

161 19 打赏收藏转发到动态举报

写回复

用AI写文章

19 条回复

切换为时间正序

请发表友善的回复…

发表回复

zjailanzj 2011-08-04

打赏
举报

好了结贴谢谢大家.

zjailanzj 2011-08-04

打赏
举报

[Quote=引用 15 楼 sp1234 的回复:]
那是framwset，并且使用target属性来将href关联到另外一个frame。这是html知识。要想搞asp.net开发，必须首先正规地学过html/css。
[/Quote]

框架跟div是我已经知道的做法了不是不会框架，因为下面页面中的内容都是对几百万数据处理了就是想学学有没什么不影响性能的想找个最好的方案比如Jquery无刷新配合着div做但是没试过学习嘛

Im_Sorry 2011-08-04

打赏
举报

CSDN 我感觉是用的框架，两边分别是两个页面，这样考虑会比较开朗思路！！！

afu45 2011-08-04

打赏
举报

接分

http://www.lanrentuku.com/js/biaoqian.html

以专业开发人员为伍 2011-08-04

打赏
举报

那是framwset，并且使用target属性来将href关联到另外一个frame。这是html知识。要想搞asp.net开发，必须首先正规地学过html/css。

zjailanzj 2011-08-04

打赏
举报

[Quote=引用 11 楼 msdnxgh 的回复:]
引用 2 楼 zjailanzj 的回复:
引用 1 楼 msdnxgh 的回复:
html框架

至少树型分类，可以绑定，也可以写死。也可以绑定到权限。

我主要是要问【经典】【论坛】那种切换是怎么实现了，里面内容实现比较简单，我主要想问问那个切换是放在2个层里面的还是用的什么东西做的

【经典】【论坛】连接到两个页面啊

经典一个页面，论坛一个页面
默认打开论坛页面
[/Quote]

嗯谢谢了你的意思套框架

种草德鲁伊 2011-08-04

打赏
举报

csdn的论坛好烂，又难看又难用。

zjailanzj 2011-08-04

打赏
举报

好了楼上给的是个例子但是我决定自己做一个了还没人 5分钟后结贴谢谢各位

MSDNXGH 2011-08-04

打赏
举报

[Quote=引用 2 楼 zjailanzj 的回复:]
引用 1 楼 msdnxgh 的回复:
html框架

至少树型分类，可以绑定，也可以写死。也可以绑定到权限。

我主要是要问【经典】【论坛】那种切换是怎么实现了，里面内容实现比较简单，我主要想问问那个切换是放在2个层里面的还是用的什么东西做的
[/Quote]
【经典】【论坛】连接到两个页面啊

经典一个页面，论坛一个页面
默认打开论坛页面

parverxiao 2011-08-04

打赏
举报

就是一个选项卡效果，给你一个例子，自己看吧
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="" />
<meta name="description" content="" />
<base target="_blank">
<style>
A:link {COLOR: #0000cc; TEXT-DECORATION: underline}
A:visited {COLOR: #551a8b; TEXT-DECORATION: underline}
A:active{COLOR: #ff0000; TEXT-DECORATION: none}
A:hover {COLOR: #ff0000; TEXT-DECORATION: underline}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #ffffff;
color: #000000;
font-size: 12px;
}
td{
font-size:12px;
line-height: 150%;
}
.white {color: #ffffff}
.cardNormal {
CURSOR: hand;
COLOR: #000000;
font-size:12px;
BACKGROUND-COLOR: #FFFFFF;
border-top: 1px solid #0A6CCE;
border-right: 1px solid #0A6CCE;
border-bottom: 1px solid #0A6CCE;
border-left: 1px solid #0A6CCE;
}
.cardSelected {
BORDER-left: 1px solid #0A6CCE;
BORDER-RIGHT: 1px solid #0A6CCE;
BORDER-TOP: 1px solid #0A6CCE;
FONT-WEIGHT: normal;
CURSOR: hand;
COLOR: #000000;
font-size:12px;
BACKGROUND-COLOR: #E1EFFD;
}
.boardMain {
BORDER-RIGHT: 1px solid #dbe9fd;
BORDER-LEFT: 1px solid #dbe9fd;
COLOR: #F1AB65;
LINE-HEIGHT:200%;
BORDER-BOTTOM:1px solid #0A6CCE;
BORDER-left: 1px solid #0A6CCE;
BORDER-RIGHT: 1px solid #0A6CCE;
BACKGROUND-COLOR:#E1EFFD;
}
.cardSpace {
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
}
.cardSpaceLeft {
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
}
.cardSpaceLast {
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
}
A.nav1:link {COLOR: #000000; TEXT-DECORATION: none}
A.nav1:visited {COLOR: #000000; TEXT-DECORATION: none}
A.nav1:active,A.nav1:hover {COLOR:#000000; TEXT-DECORATION: none}
.erect{
COLOR: #ffffff;
WRITING-MODE: tb-rl;
TEXT-ALIGN:left;
letter-spacing:2px;
}
A.nav:link {COLOR: #FFFFFF; TEXT-DECORATION: none}
A.nav:visited {COLOR: #FFFFFF; TEXT-DECORATION: none}
A.nav:active{COLOR: #FFFF00; TEXT-DECORATION: none}
A.nav:hover {COLOR: #FFFF00; TEXT-DECORATION: none}
</style>
</head>
<body bgcolor="#FFFFFF">
<table width="230" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>

<script language=javascript>
function secCard(n)
{
for(i=0;i<secTable.cells.length;i++)
secTable.cells[i].className="cardNormal";
secTable.cells[n].className="cardSelected";
for(i=1;i<secTable.cells.length;i=i+2)
secTable.cells[i].className="cardSpace";
secTable.cells[n+1].className="cardSpaceLeft";
secTable.cells[3].className="cardSpaceLast";
}
function secBoard(n)
{
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies[i].style.display="none";
mainTable.tBodies[n].style.display="";
}
</script>
<td width="25" rowspan="2" align="center" bgcolor="#0A6CCE" ><span class="erect">
zzjs</span></TD>
<td><TABLE width="100%" border=0 align="center" cellPadding=0 cellSpacing=0 class=cardFont id=secTable>
<TBODY>
<TR>
<TD align="center" class="cardSelected" onMouseOver="secCard(0);secBoard(0);" style="padding:0 0 0 0">menu1</TD>
<TD width="2" height="20" class="cardSpace"> </TD>
<TD align="center" class="cardNormal" style="padding:3 0 0 0" onMouseOver="secCard(2);secBoard(1);">menu2</TD>
<TD width="2" height="20" class="cardSpace"> </TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<tr>
<td><TABLE width="100%" height=30 border="0" align="center" cellPadding="5" cellSpacing="0" class="boardMain" id="mainTable">
<TBODY style="DISPLAY: block">
<TR>
<TD align="left" vAlign="middle"><table width="100%" height="75" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td>【论坛】</td>
</tr>
</table></TD>
</TR>
</TBODY>
<TBODY style="DISPLAY: none">
<TR>
<TD align="left" vAlign="middle"><table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="69"><div align="center"></div>
zzjs.net</td>
</tr>
</table></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TABLE>
</body>
</html><TR>
<TD align="left" vAlign="middle"><table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="69"><div align="center"></div>
【经典】</td>
</tr>
</table></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TABLE>
</body>
</html>