html切换div标签

最新推荐文章于 2021-12-04 11:38:25 发布
最新推荐文章于 2021-12-04 11:38:25 发布
阅读量3k 收藏 1
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/goodlook0123/article/details/79073715
版权

实现切换table标签实例，如下代码可以直接copy，根据自己需要的样式调试使用。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab-JQ</title>
    <style>
        * {margin: 0; padding: 0; list-style: none;}
        #wrap {width: 600px; margin: 100px auto 0; overflow: hidden;}
        #tit {height: 30px;width: 600px;}
        #tit span {float: left; height: 30px; line-height: 30px; width: 200px; font-size: 20px; text-align: center; color: #ccc;background: green;}
        #con li{display: none; height: 200px; width: 600px; background: pink;font-size: 100px;line-height: 200px;text-align: center;}
        #tit span.select {background: red; color: #ccc;}
        #con li.show {display: block;}
    </style>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
    <div id="wrap">
        <div id="tit">
            <span class="select">标题1</span>
            <span>标题2</span>
            <span>标题3</span>
        </div>
        <ul id="con">
            <li class="show">
<div id="tab_01" >
<div class="widget-header widget-header-flat">
<h4>相关日志1
<!-- <a  class="btn btn-primary" href="${ctx}/main/equipment/gotoAddEquipment">添加设备</a> -->
</h4>
</div>
<div class="widget-body">
<div class="widget-main">
<div class="row">
<table id="grid-table_log"></table>
<div id="grid-pager_log"></div>
</div>
</div>
</div>
</div>
</li>
            <li>
<div id="tab_01" >
<div class="widget-header widget-header-flat">
<h4>相关日志2
<!-- <a  class="btn btn-primary" href="${ctx}/main/equipment/gotoAddEquipment">添加设备</a> -->
</h4>
</div>
<div class="widget-body">
<div class="widget-main">
<div class="row">
<table id="grid-table_log"></table>
<div id="grid-pager_log"></div>
</div>
</div>
</div>
</div>
</li>
            <li><div id="tab_01" >
<div class="widget-header widget-header-flat">
<h4>相关日志3
<!-- <a  class="btn btn-primary" href="${ctx}/main/equipment/gotoAddEquipment">添加设备</a> -->
</h4>
</div>
<div class="widget-body">
<div class="widget-main">
<div class="row">
<table id="grid-table_log"></table>
<div id="grid-pager_log"></div>
</div>
</div>
</div>
</div>
</li>
        </ul>
    </div>
    <script>
$(document).ready(function(){  
  $(this).addClass('select').siblings().removeClass('select');
            $('#con li').eq(1).show().siblings().hide();
  }) 

        $('#tit span').click(function() {
            var i = $(this).index();//下标第一种写法
            //var i = $('tit').index(this);//下标第二种写法
            $(this).addClass('select').siblings().removeClass('select');
            $('#con li').eq(i).show().siblings().hide();
        });
    </script>
</body>
</html>
goodlook0123
关注
js点击切换div内容
Candyandhxl的博客
10-07 2910
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>offHight思路</title> <style type="text/css"> *{ margin: 0; padding: 0; }...
点击按钮（a标签）隐藏显示div内容，切换div内容
05-04
点击按钮（a标签）隐藏显示div内容，切换div内容
简单的HTML-DIV切换
山外小楼
07-09 8023
HTML如下：<!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title>showdiv</title> <style> span{ cursor: pointer; } s
html div 切换,创建切换，出现，与HTML和CSS滑动div（也许jQuery？）
weixin_39815329的博客
06-09 173
嘿所以我想创建一个网页，我可以点击一个按钮，一节将从标题下方滑出，揭示内容。当它滑出时，它下面的所有元素也应该滑落。创建切换，出现，与HTML和CSS滑动div(也许jQuery？)我有种得到这只是HTML和CSS的工作......我的方法是你点击哪个是滑出自己，当你点击并按住它会滑下来。一旦你释放点击div滑回备份。这是通过这个CSS放置在滑出的div完成：#slide-out {-moz-tr...
HTML中的DIV切换
Yurliduan的博客
07-07 4336
需求为一个页面的部分模块，随按钮点击进行切换。如图为tab1和tab2，点击“进行中”和“已结束”实现切换。 1. 添加两个按钮 <div style="font-size: 0"><!--取出两个button之间的间隙--> <button style="outline:none;border-radius:5px;backgrou...
两个DIV的切换
weixin_30328063的博客
10-14 435
<html><head><title>HTML元素的显示与隐藏控制</title><script type="text/javascript">function showAndHidden1(){ var div1=document.getElementById("div1"); var div2=document.getE...
点击标签切换和自动切换DIV选项卡
12-09
在给定的代码中，我们看到了一个利用HTML、CSS和JavaScript实现的点击标签切换和自动切换的DIV选项卡。以下是这个功能的详细解析： 1. **HTML 结构**： - `div` 元素被用来创建选项卡容器（class="tab1"，id="tab1...
JS+DIV+CSS实现的经典标签切换效果代码
11-22
本文将详细讲解如何利用JavaScript（JS）、HTML的Div元素和CSS来实现一种常见的标签切换效果，即所谓的“滑动门”效果。这种效果常用于导航菜单或内容展示，使得用户可以通过点击不同的标签来切换显示不同的内容区块...
可输入文字的div标签
01-08
`<div>`标签就是一个典型的例子，通过添加特定的CSS样式和JavaScript特性，我们可以使`<div>`变得可编辑，从而实现用户输入文字的需求。 `<div>`全称为Division，意为分组或区域，它是一个通用性的容器标签，通常...
按键切换DIV
喜欢做一些demo，和分享遇到的 BUG
10-03 479
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;style&gt; #div1 {width:200px; height:200px; background:red;} &lt;/style
div模拟页面切换
zhuyangxing的专栏
08-12 2779
web端实现浏览器的快速页面切换（特别适用于android做壳，内部用h5来实现的app） 设计思路： 多个div每个div单独占用一整页需要跳页时使用div的显示（新页）和隐藏（旧页）即可。 经测试隐藏div(页)与显示div(页)之间的事件并不会相互影响 其实设计思路和jqm（jqueryMobile）设置思路一致 jqm里面是以data-role="page
div+css实现tab切换
Albert
12-02 2138
div+css实现tab切换                                                                                                         ——我一直不太信任自己的记忆力，所以我把它们都写下来       为了方便你们查看，css和js写在同一个html文件里，先看效果吧      &lt...
html的div内换页,切换两个div的翻页效果
weixin_33501543的博客
06-20 688
使用步骤1、引入以下的js和css文件2、在head标签中加入以下js代码$(function() { //single book $('#mybook').booklet(); //multiple books with ID's $('#mybook1, #mybook2').booklet(); //multiple books with...
html实现切换不同页面,技术前沿 CSS+JavaScript实现页面不同布局的切换
weixin_35973118的博客
06-03 1739
本文向大家描述一下CSS+JavaScript实现页面不同布局的切换，比如CSS平铺显示与列表显示布局的切换，实现的原理说穿了，很简单，就是使用CSS切换列表元素父标签的class，不同的class对应不同的布局方式。CSS+JavaScript实现页面不同布局的切换一、关于显示方式的切换CSS显示方式的切换很常见，最常见的莫过于在文件夹中查看文件的时候，我们可以选择“平铺”、“图标”、“列表”、...
(超简单)点击按钮切换div
凡的博客
12-04 7635
点击按钮切换div超详细教程，谁看谁都会，保姆级教程
点击切换
nahedan的博客
01-25 645
点击切换功能 在实际应用中，点击或者移入某一元素上，弹出下拉菜单或者页面，是网页设计的常见操作。 下面我们实现一种点击菜单实现菜单切换，使用js提供三种方式实现该功能。 1.使用html设计基本结构 <body> <h2>多Tab点击切换</h2> <ul id="tab"> <li id="tab1" value="1">10元套餐</li> <li id="tab2" value="2">30元套餐</l
实现同一网页DIV自由切换
chuanmuzhi2728的博客
04-27 733
在同一个页面实现不同div 的切换更替 设想，我们定义两个大的div各分布在左右两边，左边的放控制标签，右边的div则随左边的事件而改变。意思就跟我们看的手册一样，左边是标题，右边是内容。好的，下面我来写一个简单的切换代码解析吧。 HTML内容 <!DOCTYPE html>...
html在div标签实现图片滚动
最新发布
12-18
HTML中的div标签可以用来实现图片滚动，通常可以通过结合CSS和JavaScript来实现。首先，在HTML文件中使用div标签来包裹要显示的图片，并为这个div设置一个固定宽度和高度，同时设置overflow属性为hidden，以隐藏超出...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值