标签和面板开关 [英] Tab and panel switch
本文介绍了标签和面板开关的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想用多个标签创建一个页面。我得到了使用bootstrap.css和bootstrap.js的源代码。现在，我添加了一个按钮。我想要做的是当我单击按钮时，当前的红色div变为非活动的选项卡窗格，而橙色div变为活动的选项卡窗格。但是，我在下面创建的代码不起作用。你能帮忙搞清楚怎么做吗？谢谢。
< html lang = zh >
< head >
< link href = bootstrap / css / bootstrap.css rel = 样式表 type = <温泉n class =code-keyword> text / css / >
< script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js type = text / javascript > < / 脚本 >
< script src = bootstrap / js / bootstrap.js 类型 = text / javascript > < / script > >
< / head >
< body >
< div class = 容器 >
<！ - ---- - >
< div < span class =code-attribute> id = content >
< ul id = tabs class = nav nav-选项卡 data-tabs = 标签 >
< ; li class < span class =code-keyword> = 有效 > < a href = ＃red data-toggle = 标签 > 红色< / a > < / li >
< li > < a href = ＃orange data-toggle = 标签 > 橙色< / a > < / li >
< li > < a href = ＃yellow data-toggle = tab > 黄色< / a <跨度lass =code-keyword>> < / li >
< li > < a href = ＃绿色 data-toggle = 标签 > 绿色< / a > < / li >
< li > < < span class =code-leadattribute> a href = #blue 数据切换 = 标签 > ; 蓝色< / a > < / li >
< / ul >
< div id = my- tab-content class = tab-content >
< div class = 标签窗格活动 id = red >
< h1 > 红色< / h1 >
< p > 红色，红色，红色，红色，红色，红色< / p >
< 输入 id = Button1 type = 按钮 值 = 按钮 onclick = btn1_Click（）; / >
< / div >
< div < span class =code-attribute> class = tab-pane id = 橙色 >
< h1 > 橙色< / h1 >
< p > 橙橙橙橙橙< / p >
< / div >
< div class = tab-pane id = 黄色 >
< h1 > 黄色< / h1 >
< p > 黄色黄色黄色黄色黄色< / p >
< / div >
< div class = tab-pane id = green >
< h1 > 绿色< / h1 >
< p > 绿色绿色绿色绿色绿色< / p >
< / div >
< div class = tab-pane id = blue >
< h1 > 蓝色< / h1 >
< p > 蓝色蓝色蓝色蓝色< / p >
< / div >
< < span class =code-leadattribute> / div >
< / div >
< script 类型 = text / javascript >
jQuery（ document ）。ready（ function （$ ）{
$（' ＃tabs'）。tab（）;
}）;
function btn1_Click（）{
debugger ;
var v = document .getElementById（' orange'）;
v.className = ' tab-pane active';
v = document .getElementById（' red' ）;
}
< / 脚本 >
< / div > <！ - 容器 - >
< / body >
< span class =code-keyword>< / html >
解决方案
）{
（' ＃tabs'）。tab（）;
}）;
function btn1_Click（）{
debugger ;
var v = document .getElementById（' orange'）;
v.className = ' tab-pane active';
v = document .getElementById（' red' ）;
}
< / 脚本 >
< / div > <！ - 容器 - >
< / body >
< span class =code-keyword>< / html >
I want to create a page w/ multiple-tabs. I got the source code that using the bootstrap.css and bootstrap.js. Now, I added a button. What I want to do is when I click the button, the current 'red' div becomes a non-active tab-pane, while the 'orange' one becomes the active tab-pane. However, the code I created below does not work. Can you help figure out how to do it? Thanks.
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>>
</head>
<body>
<div class="container">
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#red" data-toggle="tab">Red</a></li>
<li><a href="#orange" data-toggle="tab">Orange</a></li>
<li><a href="#yellow" data-toggle="tab">Yellow</a></li>
<li><a href="#green" data-toggle="tab">Green</a></li>
<li><a href="#blue" data-toggle="tab">Blue</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
<input id="Button1" type="button" value="button" onclick="btn1_Click();"/>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
function btn1_Click() {
debugger;
var v = document.getElementById('orange');
v.className = 'tab-pane active';
v = document.getElementById('red');
}
</script>
</div> <!-- container -->
</body>
</html> 解决方案
) {
('#tabs').tab(); }); function btn1_Click() { debugger; var v = document.getElementById('orange'); v.className = 'tab-pane active'; v = document.getElementById('red'); } </script> </div> <!-- container --> </body> </html>
这篇关于标签和面板开关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
