61,129
社区成员
发帖
与我相关
我的任务
分享请教css实现标签效果时出现的问题
不知道改页是不是能不用转到别页就能实现各个项目class="selectedtab"属性的变化
<STYLE>
<!--
#container
{
width: 500px;
padding: 30px;
border: 1px solid #ccc;
background: #fff;
}
#beautytab
{
height: 20px;
margin: 0;
padding-left: 10px;
background: url('/Upload/editor/bottom.gif') repeat-x bottom;
}
#beautytab li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#beautytab a:link, #beautytab a:visited
{
float: left;
background: #f3f3f3;
font-size: 12px;
line-height: 14px;
font-weight: bold;
padding: 2px 10px 2px 10px;
margin-right: 4px;
border: 1px solid #ccc;
text-decoration: none;
color: #666;
}
#beautytab a:link.selectedtab, #beautytab a:visited.selectedtab
{
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}
#beautytab a:hover
{
background: #fff;
}
-->
</STYLE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<div id="container">
<ul id="beautytab">
<li><a href="#" class="selectedtab">标签卡一</a></li>
<li><a href="#">标签卡二</a></li>
<li><a href="#">标签卡三</a></li>
<li><a href="#">标签卡四</a></li>
</ul>
</div>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 51px; top: 67px;">div1<img src="1.gif" width="320" height="240"></div>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 53px; top: 68px;">div2<img src="2.gif" width="320" height="240"></div>
</body>
</html>
<STYLE>
<!--
#container
{
width: 500px;
padding: 30px;
border: 1px solid #ccc;
background: #fff;
}
#beautytab
{
height: 20px;
margin: 0;
padding-left: 10px;
background: url('/Upload/editor/bottom.gif') repeat-x bottom;
}
#beautytab li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#beautytab a:link, #beautytab a:visited
{
float: left;
background: #f3f3f3;
font-size: 12px;
line-height: 14px;
font-weight: bold;
padding: 2px 10px 2px 10px;
margin-right: 4px;
border: 1px solid #ccc;
text-decoration: none;
color: #666;
}
#beautytab a:link.selectedtab, #beautytab a:visited.selectedtab
{
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}
#beautytab a:hover
{
background: #fff;
}
-->
</STYLE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<div id="container">
<ul id="beautytab">
<li><a href="#" class="selectedtab">标签卡一</a></li>
<li><a href="#">标签卡二</a></li>
<li><a href="#">标签卡三</a></li>
<li><a href="#">标签卡四</a></li>
</ul>
</div>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 51px; top: 67px;">div1<img src="1.gif" width="320" height="240"></div>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 53px; top: 68px;">div2<img src="2.gif" width="320" height="240"></div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
lwwyr 2005-03-27
- 打赏
- 举报
用框架
ffyd2000 2005-03-26
- 打赏
- 举报
div+JS 也行
俺写了个例子
<STYLE>
<!--
#container
{
width: 500px;
padding: 30px;
border: 1px solid #ccc;
background: #fff;
}
#beautytab
{
height: 20px;
margin: 0;
padding-left: 10px;
background: url('/Upload/editor/bottom.gif') repeat-x bottom;
}
#beautytab li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#beautytab a:link, #beautytab a:visited
{
float: left;
background: #f3f3f3;
font-size: 12px;
line-height: 14px;
font-weight: bold;
padding: 2px 10px 2px 10px;
margin-right: 4px;
border: 1px solid #ccc;
text-decoration: none;
color: #666;
}
#beautytab a:link.selectedtab, #beautytab a:visited.selectedtab
{
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}
#beautytab a:hover
{
background: #fff;
}
.div_v
{
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 51px;
top: 67px;
}
.div_u
{
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 51px;
top: 67px;
display:none;
}
-->
</STYLE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language=javascript>
function switchdiv(divid)
{
var cstr;
for(var i=1;i<=4;i++)
{
if (i==divid)
{cstr="document.all.Layer"+i+".className='div_v'";}
else
{cstr="document.all.Layer"+i+".className='div_U'";}
eval(cstr);
}
}
</script>
</head>
<body>
<div id="container">
<ul id="beautytab">
<li><a href="#" onclick="switchdiv(1)">标签卡一</a></li>
<li><a href="#" onclick="switchdiv(2)">标签卡二</a></li>
<li><a href="#" onclick="switchdiv(3)">标签卡三</a></li>
<li><a href="#" onclick="switchdiv(4)">标签卡四</a></li>
</ul>
</div>
<div id="Layer1" class="div_v">div1的内容<img src="1.gif" width="320" height="240"></div>
<div id="Layer2" class="div_u">div2的内容<img src="2.gif" width="320" height="240"></div>
<div id="Layer3" class="div_u">div3的内容<img src="2.gif" width="320" height="240"></div>
<div id="Layer4" class="div_u">div4的内容<img src="2.gif" width="320" height="240"></div>
</body>
</html>
俺写了个例子
<STYLE>
<!--
#container
{
width: 500px;
padding: 30px;
border: 1px solid #ccc;
background: #fff;
}
#beautytab
{
height: 20px;
margin: 0;
padding-left: 10px;
background: url('/Upload/editor/bottom.gif') repeat-x bottom;
}
#beautytab li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#beautytab a:link, #beautytab a:visited
{
float: left;
background: #f3f3f3;
font-size: 12px;
line-height: 14px;
font-weight: bold;
padding: 2px 10px 2px 10px;
margin-right: 4px;
border: 1px solid #ccc;
text-decoration: none;
color: #666;
}
#beautytab a:link.selectedtab, #beautytab a:visited.selectedtab
{
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}
#beautytab a:hover
{
background: #fff;
}
.div_v
{
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 51px;
top: 67px;
}
.div_u
{
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 51px;
top: 67px;
display:none;
}
-->
</STYLE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language=javascript>
function switchdiv(divid)
{
var cstr;
for(var i=1;i<=4;i++)
{
if (i==divid)
{cstr="document.all.Layer"+i+".className='div_v'";}
else
{cstr="document.all.Layer"+i+".className='div_U'";}
eval(cstr);
}
}
</script>
</head>
<body>
<div id="container">
<ul id="beautytab">
<li><a href="#" onclick="switchdiv(1)">标签卡一</a></li>
<li><a href="#" onclick="switchdiv(2)">标签卡二</a></li>
<li><a href="#" onclick="switchdiv(3)">标签卡三</a></li>
<li><a href="#" onclick="switchdiv(4)">标签卡四</a></li>
</ul>
</div>
<div id="Layer1" class="div_v">div1的内容<img src="1.gif" width="320" height="240"></div>
<div id="Layer2" class="div_u">div2的内容<img src="2.gif" width="320" height="240"></div>
<div id="Layer3" class="div_u">div3的内容<img src="2.gif" width="320" height="240"></div>
<div id="Layer4" class="div_u">div4的内容<img src="2.gif" width="320" height="240"></div>
</body>
</html>
myvicy 2005-03-26
- 打赏
- 举报
用框架吧，上面是导航的，下面是实际要打开的页。
在导航页里记录current_id，当点击一个标签时，把current_id设为平常状态，把当前点击的标签设为选中，然后记录点击的current_id。
在导航页里记录current_id，当点击一个标签时，把current_id设为平常状态，把当前点击的标签设为选中，然后记录点击的current_id。
incity 2005-03-26
- 打赏
- 举报
不明？？？？
LCKKING 2005-03-26
- 打赏
- 举报
框架～～～
