JS 实现简单切换

最新推荐文章于 2022-02-01 11:09:22 发布
最新推荐文章于 2022-02-01 11:09:22 发布
阅读量342 收藏
点赞数
分类专栏： JS JQ HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37069064/article/details/75543406
版权




<html>

<head>
<meta charset="utf-8">
<style>
.back{
background-color: aqua;


}


.headerc{
font-style: red;
background-color: yellow;


}
.header{


}


</style>


<script>
function block1(o){
var ii1=document.getElementById("div1");
var ii2=document.getElementById("div2");
var ii3=document.getElementById("div3");
var ia1=document.getElementById("a1");
var ia2=document.getElementById("a2");
var ia3=document.getElementById("a3");


switch(o){
case 1:


ii1.style.display="inline";
ii1.style.display="block";
ii2.style.display="none";
ii3.style.display="none";
ia1.className="headerc";
ia2.className="header";
ia3.className="header";
break;
case 2:

ii2.style.display="inline";
ii2.style.display="block";
ii1.style.display="none";
ii3.style.display="none";
ia2.className="headerc";
ia1.className="header";
ia3.className="header";


break;
case 3:



ii3.style.display="inline";
ii3.style.display="block";
ii1.style.display="none";
ii2.style.display="none";
ia3.className="headerc";
ia2.className="header";
ia1.className="header";


break;


}
}


                                                         
</script>
</head>
<body>
<table id="mytable"border="1"cellspacing="0"width="200">
<tr>
<td><div id="a1"οnclick="block1(1)">国际</div></td>
<td><div id="a2"οnclick="block1(2)">军事</div></td>
<td><div id="a3"οnclick="block1(3)">要闻</div></td>
</tr>


</table>
<div class="back">
<div id="div1" style="display:none">

国际新闻
</div>

<div id="div2" style="display:none">
军事新闻
</div>
<div id="div3" style="display:none">
        要问闻吻温
</div>
</div>




</body>
</html>
一决威严-雪雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 简单图片切换
04-02
NULL 博文链接：https://julyzergcn.iteye.com/blog/1452163
Js更简单的切换
weixin_30639719的博客
12-11 63
cshtml页面： <div class="htside_rt2"> <div class="hmNewsBar"> <div class="nxMenuGroup"> <ul class="nxMenuZu"> <li class="current"><a href="/news/Index" cla...
用js实现简单的切换图片
weixin_44382124的博客
01-29 404
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; d
js做内容切换
Big_eyes123的博客
11-21 774
今天我看了网易云课堂的js基础视频，跟着老师学了怎样做简单的选项卡（也就是内容切换），下面是我写的： &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8" /&gt; &lt;styl
js实现简单的tab切换
he626shidizai的博客
03-26 499
一些感慨 本人属于小白级别，晚上的代码感觉都比较复杂（对于初学者来说）。 花了很大劲才出现效果，主要是html5不支持一些特性，而网上的教程有的又很老。 还有刚开始写js的时候不知道错误出在哪里一顿瞎找，吐槽js没有编译器。后来才发现浏览器的检查功能在console中会报错，这样就可以开心地找bug了。 要点 点卡切换我理解的就是要将切换的tab封装维div，然后修改display属性来确定显示哪...
js实现简易点击切换显示或隐藏
01-21
本文实例为大家分享了js实现简易点击切换显示或隐藏的具体代码，供大家参考，具体内容如下 html: 点击切换显示隐藏 关闭 打开 css: * { margin:0; padding:0; } #header { width:100%; height:50px; ...
JavaScript实现tab栏切换效果
10-15
这个简单的 JavaScript 实现依赖于元素的索引和类名的管理，使得用户可以通过点击 Tab 标签轻松切换页面内容。这种功能在很多网页应用中都很常见，例如产品介绍、用户设置、数据统计等场景。 总的来说，这个示例...
js实现点击切换checkbox背景图片的简单实例
10-19
下面小编就为大家带来一篇js实现点击切换checkbox背景图片的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
简单实现js页面切换功能
10-21
本文将详细讲解如何使用JavaScript实现简单的页面切换功能，并探讨页面换肤的处理原理。 首先，页面切换功能通常涉及到DOM操作，即Document Object Model，它是HTML或XML文档的结构化表示。通过JavaScript，我们...
JavaScript实现切换功能
qq_42978535的博客
02-01 1501
JavaScript实现切换功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/index.css"> </head> <body> <h3>javascript切换效果&
js切换切换
03-14
js切换切换js切换切换，只为分享一下。
js实现多图左右切换功能
12-10
本文实例为大家分享了js多图左右切换功能，供大家参考，具体内容如下 效果图： <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css" /> <!--页面初始化CSS和页面公用头部的css--> <style type="te
JS 简单展开关闭切换代码
12-01
第一种方法：原理比较简单通过判断当前是隐藏还是显示的，并以此来判断。 操作 软件开发网 欢迎你 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]第二种：更简单，但原理不是一眼能看出来能详解的朋友可以留言啊，我们给补充上 操作 jb51.net 欢迎你 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
js简单实现图片切换效果
随风而逝
01-20 4141
js简单实现图片切换效果 body{ margin: 0; padding: 0; } .adbody{ width:100%; height:100%; } .adPanel{ width:100%; height:100%; } var count =
点击切换JS
weixin_30292745的博客
08-13 73
$(function(){ var tabnav = $("#tab-nav ul li"); tabnav.click(function(){ $(this).addClass("hover").siblings().removeClass("hover"); var index = $("#tab-nav ul li").index(...
js实现切换
代码写到地老天荒
11-09 418
js主要功能之一就是实现页面的特效,窗体的切换可以减少页面的大小,被门户网站大量应用思路: 1,先将要显示的设置为display:bisible 否则设为none 2,设置栏目的id ,js获取栏目的id,如果id为Null就设置为显示 3,判断js获取的id名字;再设置是否显示   代码实现:   html代码: &lt;div id="mai...
标签切换JS代码
weixin_30794491的博客
05-04 78
//标签切换 var nav = $('.index-nav'); var content = $('.index-nav-content li'); function hoverNav ($eleArr) { var $nav = $eleArr[0]; var $content = $eleArr[1]; $nav.on('mouseover',...
js:tab切换（4种方法 大全 代码）
weixin_59519449的博客
10-07 590
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box { display: flex; } .left>div { width: 200px; height: 100px; line-height: 100px;.
Js文字公告切换代码
weixin_30418341的博客
10-18 188
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>广告文字-亿诚</title></head><body bgcolor="#fef4d9" onLoad="play_rt()"><...
javascript实现tab切换
最新发布
05-14
... <li class="active">Tab 1 <li>Tab 2 <li>Tab 3 <div class="tab-panel active">Tab 1 content ...以上代码实现了一个简单的 Tab 切换效果。当点击 Tab 标签时，会切换对应面板的显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值