javascript 三次跳转

最新推荐文章于 2025-08-14 17:31:00 发布

原创最新推荐文章于 2025-08-14 17:31:00 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #div #generator #html

@html/js/css/Ajax 专栏收录该内容

289 篇文章

订阅专栏

本文介绍了一个简单的网页元素切换效果实现方法，通过点击不同的按钮来显示和隐藏对应的网页内容区域。利用JavaScript控制不同div元素的display属性，实现了页面内容的动态显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Descrīption" CONTENT="">
</HEAD>

<BODY>
      <div id=2 ōnclick='hello();'>显示页面一</div>
      <div id=3 ōnclick='world();'>显示页面二</div>
      <div id='dis'>
       <div id='hello'>
           <ul><li>test 1</li><li>test 1</li><li>test 1</li></ul>
       </div>
       <div id='world' style='display:none;'>
           <ul><li>test 2</li><li>test 2</li><li>test 2</li></ul>
           <a href="javascrīpt:"onclick='last();'>
           next
           </a>
       </div>
       <div id="last" style='display:none;'>
       DODO
       </div>
      </div>
<scrīpt>
   function hello()
{
document.getElementById('hello').style.display = 'block';
document.getElementById('world').style.display = 'none';
document.getElementById('last').style.display = 'none';

}
function world()
{
document.getElementById('hello').style.display = 'none';
document.getElementById('world').style.display = 'block';
document.getElementById('last').style.display = 'none';
}
function last()
{
       document.getElementById('world').style.display = 'none';
       document.getElementById('hello').style.display = 'none';
       document.getElementById('last').style.display = 'block';

}
</scrīpt>
</BODY>
</HTML>