CSS+JS副选框

最新推荐文章于 2024-11-10 11:49:10 发布

charmjs

最新推荐文章于 2024-11-10 11:49:10 发布

阅读量721

点赞数

文章标签： css javascript div xhtml border function

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/charmjs/article/details/2034246

版权

本文介绍了一种使用JavaScript实现网页中特定内容区域的显示与隐藏的方法。通过鼠标悬停事件触发，可以切换不同内容区域的可见性，并同时改变相应标题栏背景颜色以示当前活动区。此技术适用于创建交互式导航菜单或内容选项卡。

摘要由CSDN通过智能技术生成

<script>
function ShowLayers(n,m)
{
for(i=1;i<=m;i++)
{
  eval("content" + i).style.display="none";
  eval("title"+i+".style.background=/"ffffff/";");
}
eval("title"+n+".style.background=/"cccccc/";");
eval("content" + n).style.display="";
}
</script>
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff">
<tr>
    <td height="20" id="title1" bgcolor="#cccccc"><a οnmοuseοver="javascript:ShowLayers(1,5);">标题1</a></td>
    <td id="title2"><a οnmοuseοver="javascript:ShowLayers(2,5);">标题2</a></td>
    <td id="title3"><a οnmοuseοver="javascript:ShowLayers(3,5);">标题3</a></td>
    <td id="title4"><a οnmοuseοver="javascript:ShowLayers(4,5);">标题4</a></td>
    <td id="title5"><a οnmοuseοver="javascript:ShowLayers(5,5);">标题5</a></td>
</tr>
<tr>
    <td height="100" colspan="5" bgcolor="cccccc">
<div id="content1" style="display:;">
内容1
</div>
<div id="content2" style="display:none;">
内容2
</div>
<div id="content3" style="display:none;">
内容3
</div>
<div id="content4" style="display:none;">
内容4
</div>
<div id="content5" style="display:none;">
内容5
</div>
</td>
</tr>
</table>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

普通网友 CSDN认证博客专家 CSDN认证企业博客

码龄17年

17: 原创

-: 周排名

-: 总排名

8462: 访问

: 等级

300: 积分

0: 粉丝

0: 获赞

1: 评论

0: 收藏

私信

关注

热门文章

最新评论

Sql语句大全
普通网友: create table [dbo].[User] ( [User_Id] int identity , [User_Name] [varchar](10) Not Null, [User_Pass] [varchar](20) Not Null, [User_QQ] int, [User_MSN] varchar(50), [User_Sex] bit, [User_phone] [varchar](20), [User_Address] [varchar](100), [User_AddNum] [int], [User_RegDate] [datetime] NOT NULL, constraint [PK_User] primary key clustered ( [User_Id] asc )with (pad_index=off,statistics_norecompute=off,ignore_dup_key=off,allow_row_locks=on,allow_page_locks=on) on [primary] )on [primary] create table [dbo].[News_Category] ( [Category_Id] int identity, [Category_Name] [varchar](30) NOT NULL, constraint [PK_News_Category] primary key clustered ( [Category_Id] asc )with (pad_index=off,statistics_norecompute=off,ignore_dup_key=off,allow_row_locks=on,allow_page_locks=on) on [primary] )on [primary] create table [dbo].[News_News] ( [News_Id] int identity, [Category_Id] int constraint [PK_News_news_category] foreign key ([Category_ID]) references [News_Category]([Category_Id] ),--外键.新闻分类 [User_Id] int constraint [PK_News_User] foreign key ([User_ID]) references [User]([User_Id] ),--外键,新闻发表人 [News_Title] [varchar](50) not null,--标题 [News_Content] [text] not null,--内容 [News_PublicDate] [datetime] NOT NULL,--发表日期 [News_Hits] [int] NOT NULL,--点击次数 constraint [PK_News_News] primary

大家在看

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。