gpt4 book ai didi

javascript - Bootstrap 单选按钮和折叠仅部分起作用

转载 作者:行者123 更新时间:2023-11-30 05:52:05 25 4
gpt4 key购买 nike

我想在我的自举网站中使用单选按钮组和折叠功能。我想在任何给定时间有 3 个按钮并且只有一个按钮/div 处于事件状态。我让它部分起作用,但不完全起作用。

当我选择第一个单选按钮时,它会正确显示第一个 div。如果我移动到第二个 div,它也很好用。如果我回到也显示的第一个 div。但是然后 - 如果我移动到第 3 个按钮,它会显示第 3 个 div,但如果我然后返回到第 1 个按钮,第 1 个 div 将不再显示。从那时起,我只能显示 div2 和 div3。

这是我所做的。

我创建的单选按钮组如下:

<div class="btn-group" data-toggle="buttons-radio">
<button class="btn btn-primary btn-large" onclick="showdiv(1);">Save as PDF</button>
<button class="btn btn-primary btn-large" onclick="showdiv(2);">Simple API</button>
<button class="btn btn-primary btn-large" onclick="showdiv(3);">Advanced API</button>
</div>

然后我创建了三个 div,如下所示:

<div id="div1" class="row pricing collapse">
.....
</div>
<div id="div2" class="row pricing collapse">
.....
</div>
<div id="div3" class="row pricing collapse">
.....
</div>

我创建的用于显示给定 div 的 javascript 如下:

function showdivold(divnr) {
for (var i=1;i<=3;i++)
{
if (i==divnr)
{
$('#div'+i).collapse('show');
}
else
{
$('#div'+i).collapse('hide');
}
}
}

如有任何帮助,我们将不胜感激。我使用 jquery1.8.3 和 bootstrap js。

另一个问题是我似乎无法将第一个单选按钮的默认状态设置为“按下”。

最佳答案

这个怎么样?这就是你所追求的吗?我使用了 Bootstrap 2.3.1 和 JQuery 1.9.1。希望最新版本对您来说不是问题。

<!DOCTYPE html>
<html lang="en">
<head>
<link href="../assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="btn-group nav nav-tabs" data-toggle="buttons-radio">
<button class="btn btn-large" href="#div1" data-toggle="tab">Save as PDF</button>
<button class="btn btn-large" href="#div2" data-toggle="tab">Simple API</button>
<button class="btn btn-large" href="#div3" data-toggle="tab">Advanced API</button>
</div>

<div class="tab-content">
<div id="div1" class="tab-pane active">
<p>div #1</p>
</div>
<div id="div2" class="tab-pane">
<p>div #2</p>
</div>
<div id="div3" class="tab-pane">
<p>div #3</p>
</div>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
</body>
</html>

关于javascript - Bootstrap 单选按钮和折叠仅部分起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14112513/

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