javascript - 选项卡内容不变-6ren

javascript - 选项卡内容不变

转载作者：行者123 更新时间：2023-11-28 06:19:24

26

4

我正在尝试在一个页面中制作不同的选项卡，所有选项卡的正文内容都不同。但是，当我单击新选项卡时，正文没有改变。有人有什么建议吗？它改变了页面，但每个页面的主体都是一样的，我不确定为什么。不确定这是我在 html 中设置选项卡的方式还是需要用 java 更改的内容。任何帮助将不胜感激。

<!DOCTYPE html>
<html>
<head>
        <script        src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./common/res.css"/>
    <meta charset="utf-8">
    <title>Room Reservation</title>
</head>
<header>
    <script type="text/javascript" src="./common/tab.js"></script>
</header>
<body>
    <div class="tabs">
        <ul class="tab-links">
            <li class="active"><a href="#tab1">Stage</a></li>
            <li><a href="#tab2">Studio</a></li>
            <li><a href="#tab3">Session</a></li>
        </ul>

<div class="tab-content">
    <div id="tab1" class="tab active">
        <form>
            Room Selection:<br>
            <select name="room">
                <option value="">Select Room</option>
                <option value="stage">Stage Access</option>
                <option value="grip">Grip Closet</option>
                <option value="grid">Grid</option>
        </form>
    </div>
    <div id="tab2" class="tab">
        <p>Studio</p>
    </div>

    <div id="tab3" class="tab">
        <p>Session</p>
    </div>
</div>
</div>
<script>
jQuery(document).ready(function() {
    jQuery('.tabs .tab-links li').on('click', function(e)  {
    tabs(jQuery(this).attr('data-toggle'));
    jQuery(this).addClass('active').siblings().removeClass('active');
    });`

    function tabs(tab) {
        jQuery('.tab-content .tab').hide()
        jQuery('.tab-content').find(tab).show();
    }
});
</script>
</body>
</html>



/*----- Tabs -----*/
.tabs {
width:100%;
display:inline-block;
}

/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
    display:block;
    clear:both;
    content:'';
}

.tab-links li {
    margin:0px 5px;
    float:left;
    list-style:none;
}

    .tab-links a {
        padding:9px 15px;
        display:inline-block;
        border-radius:3px 3px 0px 0px;
        background:#7FB5DA;
        font-size:16px;
        font-weight:600;
        color:#4c4c4c;
        transition:all linear 0.15s;
    }

    .tab-links a:hover {
        background:#a7cce5;
        text-decoration:none;
    }

li.active a, li.active a:hover {
    background:#fff;
    color:#4c4c4c;
}

/*----- Content of Tabs -----*/
.tab-content {
    padding:15px;
    border-radius:3px;
    box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
    background:#fff;
}

    .tab {
        display:none;
    }

    .tab.active {
        display:block;
    }

最佳答案

这是你的 jquery 代码正确的，有些括号没有正确关闭

$(document).ready(function(){
  function tabs(tab) {
    jQuery('.tab-content .tab').hide()
    jQuery('.tab-content').find(tab).show();
  }


$('.tabs .tab-links li').on('click', function(e)  {
    tabs($(this).attr('data-toggle'));
    $(this).addClass('active').siblings().removeClass('active');



  });
});

结果:jsfiddle

关于javascript - 选项卡内容不变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35704647/

26

4

0

文章推荐： sass - 我如何让 Sass 工作？

文章推荐： ios - 自定义单元格中的焦点 UITextfield

文章推荐： javascript - 专注于输入表单和 div

MySQL根据SUM列别名计算两列之间的百分比差异(不变)
我有 2 个表 t1，其中存储价格和项目类型以及一个 ENUM 值和 t2，其中存储销售数量。我有一个计算总销售额(价格 * 数量)的查询，但我需要计算两个结果数字之间的差值。两个数之差的计算公式应
java -version 不变
我在使用 zsh 运行 Big Sur 11.2 的 Mac 上更改运行的 java 版本时遇到问题。我想将 Java 1.8 设置为默认设置，因此我使用以下命令设置 JAVA_HOME: $ uns
javascript - 如何触发选择元素的点击事件？ (不变)
在下面的代码中，当我改变选择时，会有一个alert。我试图使该功能类似于当我单击 option 时它会显示 alert。 $(document).ready(function() { $("#x"
Java GUI 不变
好吧，我正在制作一个简单的 react 游戏，我的代码如下。现在，当调用 startGame() 时，如果我注释掉 while 循环，一切都会发生，但是当我使用 thread.sleep(1000)
iphone - CFBundleURLTypes 不变
我目前正在尝试将 .plist 文件中的 CFBundleURLTypes 的值更改为新值，但似乎没有任何效果，并且如果我调用，旧值仍然存在 NSLog(@"%@", [[NSBundle mainB
java - 调用parse函数时如何保持"不变？
我正在尝试使用 Jsoup 中的解析函数来解析 html 字符串。我尝试阅读了很多相关的帖子以及API，但仍然没有找到答案。 String html = ""others"; Docume
android - layoutParams 不变
我正在尝试为水平列表项关闭设置动画alpha 动画有效，layoutparam 值也随时间减少但出于某种原因，这并没有改变列表项的实际高度。 @Override protected void appl
Ruby 常量双管道等于值与定义？不变
双管道等于: MY_CONST ||= 42 运算符定义？ MY_CONST = 42 unless defined? MY_CONST 为什么第二种方式更为普遍？第一个有什么缺点吗？最佳答案在一
.htaccess - 导航到另一个页面时保持网站 url 不变？
我希望我的站点地址栏在访问子页面时不要更改其地址，它应该显示我的 index.html ，即使我进入 tosub 页面。就像我打开 www.xyz.com我导航到它仍应显示的任何页面 www.xyz
codeigniter - 如何在codeigniter中保持 session 不变？
我试图通过将购物车存储在数据库的表中来创建购物车，而不是使用内置的 CI 购物车类。我使用 sessionID 来识别一个访问者和另一个访问者。但是我发现sessionID在一段时间内一直在变化，连访
java - 类(class)不变
我面临一个奇怪的问题。一旦更改了.java文件-看来测试仍在使用该文件的早期版本(.class)。从我的 Angular 来看，应该从.build文件夹中删除该类，并从新版本的.java文件重新编译
r - 将向量组合成矩阵后，如何保持向量的原始属性(不变)
下面的R代码显示了一个关于向量组合的例子，之后，向量“c”的属性变成了字符。如何让它仍然保持属性为数字？ a='aa';b='bb';c=c(1,2,3,4,5) dd=data.table(cbin
c# - SpeechRecognitionEngine.AudioLevel 不变
我一直在使用 Kinect 和语音识别，我注意到我无法让 AudioLevel 成员从我的 SpeechRecognitionEngine 对象中更改。我成功地让命令被识别，所以我知道 kinect
android - 通知 ID 不变
大家好，我已经实现了通知功能。我对通知 ID 有疑问。这是我的代码: protected void ShowNotification(String title, String text){ Noti
ios - CALayer shadowColor 不变
所以我第一次正确设置了 UIView 图层的阴影(它显示得非常好)但是当我尝试更改颜色时(没有别的，只是 layer.shadowColor)它不会在 View 中更新。它仍然显示原始颜色。我已经尝试
java - 如何保持每次运行的值(value)不变？
使用 java 我想在一个程序中生成一些随机值，然后在每次执行第二个程序时在其他程序中使用这些值。这样做的目的是生成一次随机值，然后在以后每次运行程序时保持并保持它们不变。有可能吗？谢谢最佳答案
java - JCheckBox 的值重置/不变
我有几个组件，所有组件都继承了 JCheckBox 而没有覆盖它的任何内容，存储在一个 vector 中，然后遍历该 vector 并将每个组件添加到一个对话框中 CreateLists(); //
iphone - 切换到另一个选项卡时使标题 View 不变
我有一个 UITabBarController。现在我想在其上方添加一个 View ，并在用户切换到另一个选项卡时使 View 保持不变。我尝试创建一个 UIViewController，并将 UIT
python - shutil.get_terminal_size() 不变
我正在使用 curses 来打印一个非常漂亮的控制台 UI，我需要它依赖于终端大小。为此，我阅读了 here ，我可以使用 shutil.get_terminal_size .所以我正在做这段代码:
javascript - 计算后总值(value)不变
我有一个jsfiddle here . fiddle 中有许多标记文本框。在文本框中输入一个数字，然后继续单击“添加问题”按钮。您将看到剩余的总分等于 10，但它不会改变。剩余分数的数量应该通过减去附

首页

博学

6Ren·AI

商城

javascript - 选项卡内容不变