Question

在Mac上使用Coda 2 使用HTML，CSS，JS和Bootstrap 3（通过CDN）

单个网页

系列链接将各种表单元素放在第二列中。

目标：单击引导网格中包含的特定链接单击特定链接时，应显示相关内容，而其他内容均隐藏。

改编自以前回答的问题的代码@ ysmVn

现在得到JS Post错误。我不了解JS，但我的猜测是我需要替代.siblings（）。hide（）

我的相关代码是

<a href="" class="one">One</a>
<a href="" class="two">Two</a>
<a href="" class="three">Three</a>
<a href="" class="four">Four</a><br /><br />

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div id="one">One</div>
        </div>
        <div class="col-md-3">
             <div id="two">Two</div>
        </div>
        <div class="col-md-3">
            <div id="three">Three</div>
        </div>
        <div class="col-md-3">
            <div id="four">Four</div><br/><br/>
        </div>
</div>

和Javascript是：

$(document).ready(function(){


      // Show chosen div, and hide all others
    $("a").click(function (e) 
    {
            e.preventDefault();
        $("#" + $(this).attr("class")).show().siblings('div').hide();
    });

});

Answer 1

对于记录，您提到的小提琴的直接链接是这样的：
http://jsfiddle.net/YsmVn/
不知道你真正打算做什么，只是想知道你是否有考虑使用引导标签或折叠组件？原样现在，似乎你正在重新发明轮子的道路上。

http://getbootstrap.com/javascript/#tabs

http://getbootstrap.com/javascript/#collapse
以下是您发布的代码的替代版本，带有工作样本。在此示例中，div最初都是设置为显示，但显然可以更改。

<强> http://jsbin.com/decobeba/1/edit?html,css,output

<强>的JavaScript

$(document).ready(function(){
    // Show chosen div, and hide all others
    $("#my-nav a").click(function (e) {
        e.preventDefault();
        $('#my-nav a').removeClass('active');
        $(this).addClass('active');
        $('.my-section').hide();
        var sectionActive = $(this).data('section');
        $('#' + sectionActive).show();
    });
});

<强> HTML

<div id="my-nav">
   <a href="#" data-section="one">One</a>
   <a href="#" data-section="two">Two</a>
   <a href="#" data-section="three">Three</a>
   <a href="#" data-section="four">Four</a>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div id="one" class="my-section">One</div>
        </div>
        <div class="col-md-3">
             <div id="two" class="my-section">Two</div>
        </div>
        <div class="col-md-3">
            <div id="three" class="my-section">Three</div>
        </div>
        <div class="col-md-3">
            <div id="four" class="my-section">Four</div>
        </div>
    </div>
</div>

在Bootstrap框架内隐藏/显示元素

1 个答案: