动态增加div，实现div之间的切换，不刷新页面

最新推荐文章于 2022-11-29 23:47:56 发布
最新推荐文章于 2022-11-29 23:47:56 发布
阅读量1.9k 收藏 4
点赞数 1
分类专栏： js/jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37901706/article/details/77483712
版权

以下是jsp中的全部内容，以下jsp中使用了java，引用了jquery



<%@ page language="java" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>测试Div之间的互换</title>
    <script type="text/javascript" src="${ctx}/js/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        //“4”代表动态增加标签的份数
        <%for(int i = 0 ; i < 4; i++){%>
            var liValue = "<li class='show1'>补充协议"+<%=i%>+"</li>"
            $("#tab_title").append(liValue);
            var divValue =
                "<div class='tab_content'><table><tr><td>"
                +<%=i%>+
                "</td></tr></table></div>"
            $("#tab_container").append(divValue);
        <%}%>
        ui_control(1);
        $(".tab_content").height($(document).height()-200);
    });
    </script>
  </head>
  <!-- oncontextmenu禁止右键出现菜单， onselectstart禁止选中-->
  <body οnlοad="inittables();">
    
        <ul class="tab_title" id="tab_title">
            <li class="show1">基本信息</li>
            <li class="show1">其他</li>
        </ul>
        <div class="tab_container" id="tab_container">
            <div class="tab_content" >
                <table>
                    <tr>
                        <td>44444444444444</td>
                    </tr>
                </table>
            </div>
            <div class="tab_content">
                    <table>
                        <tr>
                            <td>555555555</td>
                        </tr>
                    </table>
            </div>

        </div>

  </body>
  <script type="text/javascript">
    function ui_control(aType){    //tabs-start
        $("ul.tab_title li:eq(0)").addClass("select");
        $(".tab_content:eq(0)").show();
    
        $("ul.tab_title li").each(function(i){
            $(this).click(function(){
            //i=i+1;
            //alert(i);
                $(".tab_content:eq("+i+")").show().siblings().hide();
                $(this).addClass("select").siblings().removeClass("select");
              });
        });
        $("ul.tab_title li:eq("+aType+")").click();
    //tabs_end
    }
  </script>
  <style>

    .tab_title{

            float: left;

            list-style: none;

        }

    .show1{
        PADDING-RIGHT: 1px;
        PADDING-LEFT: 1px;
        FONT-SIZE: 18px;
        Z-INDEX: 1;
        FLOAT: left;
        PADDING-BOTTOM: 2px;
        CURSOR: pointer;
        PADDING-TOP: 6px;
        FONT-FAMILY: MARGIN, Helvetica, Arial;
        POSITION: relative;
        TOP: -6px;
        background-position: right bottom;
        background-repeat: no-repeat;
        margin-top: 9px;
        margin-right: 0px;
        margin-bottom: -6px;
        margin-left: 0px;
        left: 3px;
        width: 100px;
        text-align: center;
    }
    .tab_container{
            float: right;            
            margin-right: 800px;    
            margin-top:100px    
        }        
.tab_content{    
            width: 500px;            
            height: 200px;            
            border: 1px solid green;            
            display: none;        }


  </style>

</html>









如果不使用java的话就需要使用foreach便签

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>测试Div之间的互换</title>
    <script type="text/javascript" src="${ctx}/js/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        ui_control(1);
        $(".tab_content").height($(document).height()-200);
    });
    </script>
  </head>
  <!-- oncontextmenu禁止右键出现菜单， onselectstart禁止选中-->
  <body οnlοad="inittables();">
    
        <ul class="tab_title" id="tab_title">
            <li class="show1">基本信息</li>
            <li class="show1">其他</li>
            <c:forEach items="${list}" var="list">
                <li class="show1">补充协议${list.index }</li>
            </c:forEach>
        </ul>
        <div class="tab_container" id="tab_container">
            <div class="tab_content" >
                <table>
                    <tr>
                        <td>44444444444444</td>
                    </tr>
                </table>
            </div>
            <div class="tab_content">
                    <table>
                        <tr>
                            <td>555555555</td>
                        </tr>
                    </table>
            </div>
            <c:forEach items="${list}" var="list">
            <div class="tab_content">
                    <table>
                        <tr>
                            <td>${list.index }</td>
                        </tr>
                    </table>
            </div>                
            </c:forEach>
        </div>

  </body>
  <script type="text/javascript">
    function ui_control(aType){    //tabs-start
        $("ul.tab_title li:eq(0)").addClass("select");
        $(".tab_content:eq(0)").show();
    
        $("ul.tab_title li").each(function(i){
            $(this).click(function(){
            //i=i+1;
            //alert(i);
                $(".tab_content:eq("+i+")").show().siblings().hide();
                $(this).addClass("select").siblings().removeClass("select");
          
              });
        });
        $("ul.tab_title li:eq("+aType+")").click();
    //tabs_end
    }
  </script>
  <style>

    .tab_title{

            float: left;

            list-style: none;

        }

    .show1{
        PADDING-RIGHT: 1px;
        PADDING-LEFT: 1px;
        FONT-SIZE: 18px;
        Z-INDEX: 1;
        FLOAT: left;
        PADDING-BOTTOM: 2px;
        CURSOR: pointer;
        PADDING-TOP: 6px;
        FONT-FAMILY: MARGIN, Helvetica, Arial;
        POSITION: relative;
        TOP: -6px;
        background-position: right bottom;
        background-repeat: no-repeat;
        margin-top: 9px;
        margin-right: 0px;
        margin-bottom: -6px;
        margin-left: 0px;
        left: 3px;
        width: 100px;
        text-align: center;
    }
    .tab_container{
            float: right;            
            margin-right: 800px;    
            margin-top:100px    
        }        
.tab_content{    
            width: 500px;            
            height: 200px;            
            border: 1px solid green;            
            display: none;        }


  </style>
</html>

周小易
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标点击不刷新页面,切换当前CSS
08-22
网页开发很多时候我们都会在后台使用框架，希望点击一个链接之后，这条链接的背景改变，以提示用户你使用的是当前功能，但是又不想刷新页面。。。本例已经做好了后台框架，图片 CSS都已经完成，很方便修改
js通过按钮新增div和删除div
Limy-离人怎挽
08-22 2195
1:html示例 <body> <div class="container-fluid"> <form id="addForm" class="form-horizontal"> <div class="form-group1"> <button onclick="addTr()" type="b...
动态绑定Class和Style
qq_39307099的博客
03-29 483
将test、active、active-click三个className,绑到div上，渲染成<div class="test active active-click"></div>其中test是固定的，active受data中actived控制，active-click受data中actived和clicked控制，请用4种写法实现。 <template> <div> <!--第一种对象语法 --> <div class="test" :
网页中嵌入外部页面的四种方法
wmyasw的专栏
09-28 2万+
一．应用框架技术 ---- 要在宿主页面中嵌入外部页面的方法是，在宿主页面中包含外部页面的位置插入“”语句即可(注意: 标签中的各种属性含义请查阅相关技术手册)。 ---- 如果想在嵌入的外部页面过长时不出现滚动条，在外部文件标签中加入“scroll=no”或者在宿主页
JS 禁止刷新和右键
weixin_30613433的博客
06-24 93
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <div style="width:100px; height:100px; backgrou...
JS阻止浏览器刷新的方法
热门推荐
吴小迪的博客
05-14 2万+
直接先给朋友们上阻止浏览器刷新的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
整理下2个div的动态切换
liuyuemozhu的博客
09-19 820
首先展示实现效果： 点击 “其他格式” 的时候动态切换两个div的显示状态： 实现需求： 两个div，一个div默认状态下是显示状态，另一个div是隐藏状态，当点击“其他格式”的时候，动态切换两个div的显示状态。 实现代码： HTML： CSS： 原生javascript： 具体看js的实现思路就可以了。 代码只是自己思想逻辑的一种具象体现，开始做的时候，还是没...
Flask+ajax实现动态更新div
ckdfs的博客
11-29 814
先清空device_page_num的所有子内容，再写入新的。每秒刷新折叠面板，显示当前接入设备的个数，并创建对应的项目。收到请求后把设备列表传给前端。随着设备列表的变化而增删。
DIV动态/动画切换效果
泡泡菌的博客
09-26 4158
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="../common/jquery-3.1.1.js" type="text/javascript">script> style> .box{position: relative}
基于Echarts图表在div动态切换时不显示的解决方式
10-15
主要介绍了基于Echarts图表在div动态切换时不显示的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于jquery tab切换(防止页面刷新)
10-28
tab切换，是一个很常见的效果，今天在项目中遇到这样一个问题。就是切换后，页面刷新，又重新定位到第一个上了，很是郁闷
动态生成div框并且同时加载数据
01-13
动态生成div框并且同时加载数据，当数据量大的时候大大节省数据回访时间
一个精简的JS DIV层tab切换代码
01-19
DIV层切换 内容一 内容二 内容三 内容部分第一区 内容部分第二区 内容部分第三区 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
01-19
实现方面主要是使用JS来控制点击按钮后改变CSS样式文件，这一切都是在JS的动态控制下，比如无刷新切换网页风格的实现，可以以此为基础来扩展。 运行效果如下图所示： 具体代码如下： <!DOCTYPE ...
vue刷新页面时去闪烁提升用户体验效果的实现方法
12-11
首先在最外层div添加v-if="isReloadAlive“，并创建变量isReloadAlive = true 随后添加provide()以及reload方法，如下： export default { provide() { return { reload: this.reload } }, data(){ ...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
4.jquery+div实现同时滑动切换的图文展示特效插件下载 5.jquery+div带动画按钮图片手动与自动切换的特效代码 6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿flash产品图片多角度展示特效代码 8.jquery...
2024-2030全球与中国盐氯化系统市场现状及未来发展趋势.docx
04-24
2024-2030全球与中国盐氯化系统市场现状及未来发展趋势
基于深度学习的积灰检测识别-图像分类源码+数据集.zip
最新发布
04-24
详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；
沈阳药科大学-答辩通用PPT模板我给母校送模板作品.pptx
04-24
PPT模板，答辩PPT模板，毕业答辩，学术汇报，母校模板，我给母校送模板作品，周会汇报，开题答辩，教育主题模板下载。PPT素材下载。
nuxt在layouts页面切换不刷新
05-30
如果你想在切换 Layout 时实现不刷新页面，可以使用 Nuxt.js 提供的动态组件和 keep-alive 组件。具体来说，你可以将 Layout 中的不同部分封装成不同的动态组件，并使用 keep-alive 组件缓存这些组件，这样就可以在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值