please叫我滚去学习 2022-03-10 22:58 采纳率: 100%
浏览 21
已结题

bootstrap使用标签页出现问题

使用Tabs组件实现一个页面内通过不同的标签页显示不同内容,但是各个标签页间内容显示有问题

img

第一个标签页的内容是一个

<script>
            // Our Javascript will go here.
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            const geometry = new THREE.BoxGeometry();
            const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
            const cube = new THREE.Mesh(geometry, material);
            scene.add(cube);

            camera.position.z = 5;

            function animate() {
                requestAnimationFrame(animate);

                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;

                renderer.render(scene, camera);
            };

            animate();
        </script>

显示如下:

img


但是切换到第二个标签页它还是显示了

img

问题相关代码
<div class="mdui-tab" mdui-tab>
        <a href="#example1-tab1" class="mdui-ripple">web</a>
        <a href="#example1-tab2" class="mdui-ripple">shopping</a>
        <a href="#example1-tab3" class="mdui-ripple">images</a>
    </div>
    <div id="example1-tab1" class="mdui-p-a-2">
        <script>
            // Our Javascript will go here.
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            const geometry = new THREE.BoxGeometry();
            const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
            const cube = new THREE.Mesh(geometry, material);
            scene.add(cube);

            camera.position.z = 5;

            function animate() {
                requestAnimationFrame(animate);

                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;

                renderer.render(scene, camera);
            };

            animate();
        </script>
    </div>
    <div id="example1-tab2" class="mdui-p-a-2">
        <div class="row">
            <div class="col-2">

            </div>
            <div class="col-8">
                <div>
                    <!-- Wrap the image or canvas element with a block element (container) -->
                    <img id="image" src="./img/a.png">
                </div>
            </div>
            <div class="col-2">

            </div>
        </div>
    </div>
    <div id="example1-tab3" class="mdui-p-a-2">images content</div>

我的解答思路和尝试过的方法

目前觉得就是这个script的问题

我想要达到的结果

每个标签页内容独立不干扰

  • 写回答

1条回答 默认 最新

  • 归来巨星 前端领域新星创作者 2022-03-11 08:58
    关注

    f12 移入下看看 内容是不是被你的js渲染在外面了

    看下层级排查一下

    img


    看你这两行代码 像是直接push到了document文档当中,并不在对应tabs节点之下

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 3月26日
  • 已采纳回答 3月18日
  • 创建了问题 3月10日

悬赏问题

  • ¥15 关于#wireshark#的问题:并且能够给数据做标注,如这个流量是在看视频或者是在转账
  • ¥90 请问,这个视频播放软件的名称,用过的朋友请给答案,上方..avi是啥意思?是看短剧还是播放本地视频?
  • ¥15 运筹优化,gurobi,python
  • ¥15 基于python的电影系统推荐
  • ¥20 springmvc重定向和返回json
  • ¥15 数学建模——参会安排怎么做
  • ¥15 电脑键盘实现触摸功能
  • ¥25 matlab无法将表达式转换为双数组怎么解决?
  • ¥15 单片机汇编语言相关程序
  • ¥20 家用射频美容仪技术规格