使用javacript和div实现Tab切换效果

最新推荐文章于 2021-05-31 08:59:46 发布
原创 最新推荐文章于 2021-05-31 08:59:46 发布 · 5.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#div #server #html #function #login #c#

本文介绍了一种使用纯JavaScript和HTML实现的简易Tab切换效果。通过简单的脚本控制不同内容块的显示与隐藏，达到类似导航栏的效果。适用于初学者理解和实践网页元素交互的基本原理。

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

 看好多网站都有这样的页面显示效果，就尝试做了一个简易的。
 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
    function SelTab(id)
     {
       var tab1=document.getElementById('view1');
       var tab2=document.getElementById('view2');
       var tab3=document.getElementById('view3');
       
       if(id=="one")
       {
         tab1.style.display="block";
         tab2.style.display="none";
         tab3.style.display="none";
       }
        if(id=="two")
       {
         tab1.style.display="none";
         tab2.style.display="block";
         tab3.style.display="none";
       }
        if(id=="three")
       {
         tab1.style.display="none";
         tab2.style.display="none";
         tab3.style.display="block";
       }
     } 
    </script>
</head>
<body onload="SelTab('one')">
    <form id="form1" runat="server">

    <div style=" width:200px; border :solid 2px red">
       <a href ="#" onmouseover ="SelTab('one')">Tab1</a> &nbsp;&nbsp; &nbsp;
       <a  href ="#" onmouseover ="SelTab('two')">Tab2</a> &nbsp;&nbsp; &nbsp;
      <a  href ="#" onmouseover ="SelTab('three')">Tab3</a> &nbsp;&nbsp; &nbsp;
      <br />
      <br />
       <div id="view1">
        <a href ="#">这是一条新闻</a> <br />
       <a href ="#">这是一条新闻</a> <br />
       <a href ="#">这是一条新闻</a> <br />
       <a href ="#">这是一条新闻</a> <br />
       <a href ="#">这是一条新闻</a> <br />
       </div>
       <div id="view2">
        <a href ="#">view2 中的新闻</a> <br />
       <a href ="#">view2 中的新闻</a> <br />
       <a href ="#">view2 中的新闻</a> <br />
       <a href ="#">view2 中的新闻</a> <br />
       <a href ="#">view2 中的新闻</a> <br />
       </div>
       <div id="view3">
        <a href ="#">Hello world</a> <br />
       <a href ="#">Hello world</a> <br />
         <a href ="#">Hello world</a> <br />
       <a href ="#">Hello world</a> <br />
       <a href ="#">Hello world</a> <br />
       </div>
     
    </div>
    </form>
</body>
</html>
 
java 实现tab页签切换 鼠标悬浮效果
rainbow_m的博客
07-31 2249
效果如图： 代码截图： 代码复制： window.onload=function(){ $('#live-list .day-tabs li:eq('+0+')').addClass('on'); $('#live-list .list-container div:eq('+0+')').show(); $("#live-list .day-tabs li").
JavaScript标签栏切换效果
12-14
JavaScript标签栏切换效果，用jvascript实现的标签栏切换
java怎么实现tab切换_[Java教程]用javascript实现tab切换
weixin_39834745的博客
02-27 158
[Java教程]用javascript实现tab切换0 2016-09-12 14:00:10html代码： 111111 222222 333333 css代码：.active{ background:yellow; } #btn div { ...
java tab标签_js-tab选项卡
weixin_33204898的博客
03-02 496
说道tab选项卡,顾名思义，就是切换不同内容分类，想必学过前端的都知道，tab有很多方法可以实现，最近刚跟师傅学了一种，感觉很简便，很实用哦。一、先看一下结果二、可以根据图来布局，首先上面标签和下面内容，需要注意的是点击上面a标签的链接和下面div的id一一对应起来，三、就是最重要的js部分了。这个地方可以分几个阶段去思考1.首先得有事件去触发点击2.获取与内容对应a标签的href,这样就可以对下...
java界面切换特效_如何给Flutter界面切换实现点特效
weixin_31292909的博客
02-28 222
背景我们知道页面之间如果直接切换，会比较生硬，还会让用户觉得很突兀，用户体验不是很好。因此一般情况下，页面之间的切换为了达到平滑过渡，都会添加动画。另外，有时候我们不喜欢系统的默认动画，希望能够自定义动画。基于此，本篇主要讲述如何给 Flutter 的页面切换增加自定义动画。默认效果首先我们看看默认效果是怎样的？看起来似乎还不错。代码如下：import 'package:flutter/mater...
JavaScript点击来回切换两个div
weixin_33897722的博客
09-26 965
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .test1{ width:100px; he...
JavaScript实现tab栏切换效果
10-15
总的来说，这个示例展示了如何使用基础的 HTML、CSS 和 JavaScript 技术实现一个 Tab 切换效果。通过对元素的选择、操作和事件监听，我们可以创建出交互性强、用户体验良好的网页组件。同时，这种实现方式也便于扩展...
使用JavaScript和CSS实现Tab切换效果指南
实现Tab效果的方法有很多，其中使用JavaScript和CSS是一种简单且高效的方式。接下来，我将详细介绍如何使用JavaScript和CSS来实现Tab效果，同时涉及相关的事件介绍。 **JavaScript与CSS实现Tab效果的基本原理：** ...
js实现tab切换效果实例
10-23
整个Tab切换效果的实现依赖于JavaScript的DOM操作和事件处理机制。当用户点击不同的标签时，JavaScript会根据当前点击的标签来动态更改内容区域的显示状态，并更新标签的样式。这使得用户体验更为流畅，并且使得页面...
js(JavaScript)实现TAB标签切换效果的简单实例
10-26
总结起来，这个JavaScript实现的TAB标签切换效果主要依赖于JavaScript事件处理和DOM操作，结合CSS样式实现了动态的交互效果。对于初学者来说，理解这个实例有助于提升对JavaScript控制页面元素能力的理解，同时也...
javascript的tab切换原理与效果实现方法
10-24
JavaScript 的 Tab 切换是一种常见的网页交互效果，它允许用户通过点击或悬停在不同的选项上，来切换显示相应的内容区域...通过不断学习和实践，我们可以创建更复杂、更交互丰富的 Tab 切换效果，提升网站的用户体验。
JavaScript实现同一页面不同div的切换及颜色改变
Bamboo_Dong的博客
07-28 7770
类似于csdn个人信息页面，先上图刚进入页面后，“我的相册”对应的区块会显示深红色，并且会显示相应的div内容。然后当我们点击“我的关系后”，“我的关系”的背景色变成深红色，其他导航背景色是灰色，并且下面对应的div也发生了变化。html代码<nav> <ul> <li class="special"><a href="#album">我的相册</a></li>
JavaScript练习二之Tabs
a7326012009的博客
12-30 246
1、通过参数配置可以控制Tabs的指定点击元素，事件，样式，动画等。        var option = { navNavPrt : '.j-tab-nav', // 导航栏区域 navContPrt : '.j-tab-con', // 内容区域 navNavIdv :
使用js实现tab页签切换效果
热门推荐
Geek_ymv的专栏
10-23 5万+
效果图如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
操作元素实例-tab切换：选择不同按钮显示不同内容并影藏其余内容，Bootstrap口风琴样式
qq_41853417的博客
09-23 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
html中纵向tab切换效果,Tab标签页的切换效果
weixin_33416697的博客
05-31 740
Tab标签页的切换效果，这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟，这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃，用到setTimeout函数，主要用到已下的事件1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法2 mouseover事件，还有就是关键的css样式编写，控制显示的样式，html>tab标签1标签...
JavaScript实现Tab标签页切换的最简便方式
diaoji4196的博客
07-12 924
转载请注明出处：http://www.cnblogs.com/-867259206/p/5664896.html 先说一下最土的一种方法： Html: <div class="tab-head"> <h2 id="tab1" onmouseover="changeTab1()" class="selected">...
两个div之前切换（tab页面）点击后实现页面的现实和隐藏
iilegend的博客
08-25 2925
<!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=""> <me
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值