gpt4 book ai didi

javascript - 为什么我的页面上的事件选项卡没有变化?

转载 作者:行者123 更新时间:2023-12-03 04:59:39 25 4
gpt4 key购买 nike

当我单击选项卡时,/#name 会发生变化。但是,表明它是事件选项卡的突出显示选项卡不会改变。内容也不会更改,并且与默认选项卡关联的内容将继续显示。

doctype html
html
head
title Bootstrap Tab this Database
script(src="/socket.io/socket.io.js")
script(src="client.js")
link(rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css")
body
div.container
nav.navbar.navbar-default.navbar-inverse
div.container-fluid
div.navbar-header
button(type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false")
span.sr-only
<!-- Draw two bars in navbar button when the window is small -->
span.icon-bar
span.icon-bar
ul.nav.navbar-nav
<!-- Setup the default active tab -->
li.active
a(href="#db1Tab", data-toggle="tab") DB1
<!-- The tabs on standby -->
li
a(href="#db2Tab", data-toggle="tab") DB2
div.tab-content
div(id="db1Tab").tab-pane.fade.in.active
include db1
div(id="db2Tab").tab-pane.fade
include db2

最佳答案

这个示例可以帮助您(自己尝试一下 here ):

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>

<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>

<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
</div>
</div>
</div>

</body>
</html>

关于javascript - 为什么我的页面上的事件选项卡没有变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42286039/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com