Question

我正在尝试更改表格或嵌套在jumbotron内的div，每当我点击一个特定按钮时它应该替换当前表格并再次点击它应该显示该按钮关联的表格。已经有许多不同的例子，但是似乎没有工作。对不起，如果以错误的方式发布了一些东西。我看到了什么（这里只列出了一些）： http://jsfiddle.net/sU9Pf/ Replace Div Content onclick JS代码：

$(window).load(function() {
$("#table_mb tr").click(function() $(this).addClass('selected').siblings().removeClass('selected');
var value = $(this).find('td:first').html();
 //alert(value);
});
$('.ok').on('click', function(e) {
alert($("#table_mb tr.selected td:first").html());
});
});
$('#mb').on('click', function() {
if ($('#table_mb').css('display') != 'none') {      $('#table_pr').html($('#static').html()).show().siblings('table_responsive').hide();
}else if ($('#table_pr').css('display') != 'none') {
 $('#table_mb').show().siblings('table_responsive').hide();
}
});

***CSS Code***

body
{
    font-family: 'Play', sans-serif;
    background-image: url(/images/default.jpg);
    background-position: right;
    /*background: #1976D2;*/
}
.header
{
    font-family: 'Play', sans-serif;
    color: whitesmoke;
}
td
{
    border: 1px #DDD solid;
    padding: 5px;
    cursor: pointer;
}
.selected {
    background-color: #2196F3;
    color: #FFF;
}
.a1
{
    position: relative;
    bottom: 48px;
}
.a2
{
    position: relative;
    bottom: 48px;
}
.a3
{
    position: relative;
    bottom: 48px;
}
.a4
{
    position: relative;
    bottom: 48px;
}
.a5
{
    position: relative;
    bottom: 48px;
}
.a6
{
    position: relative;
    bottom: 48px;
}
.demo
{
    display: none;
}
.table_mb
{
    display: inline-block;
}

HTML Code:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="jumbotron">
                <div class="btn-group" role="group">
                    <div class="btn-group btn-group-lg" role="group">
                        <button type="button" class="btn btn-primary a1" id="mb">Motherboards</button>
                        <button type="button" class="btn btn-primary a2" id="pr">Processors</button>
                        <button type="button" class="btn btn-primary a3" id="rm">Ram</button>
                        <button type="button" class="btn btn-primary a4" id="cb">Cabinet</button>
                        <button type="button" class="btn btn-primary a5" id="hd">Hard Drives</button><button type="button" class="btn btn-primary a6" id="ps">Power Supplies</button>
                    </div>
                </div>
                <table class="table" id="table_mb">
                    <thead>
                        <tr>
                            <th>Serial NO</th>
                            <th>Model NO</th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <tr>
                        <td>1</td>
                        <td>Asus Rampage</td>
                        <td>5000</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Asus Rampage VII</td>
                        <td>7000</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Asus Rampage</td>
                        <td>9000</td>
                    </tr>
                </table>
                <div class="demo" id="table_pr">
                    This works</div>
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>
</div>
</div>

Answer 1

使用bootstrap框架中的Navs类完成。 http://jsfiddle.net/Azhar786/d1k411pz/

 <ul class="nav nav-pills nav-justified" role="tablist" id="tabs">
    <li role="presentation" class="active" id="mb"><a href="#table_mb" data-toggle="tab" aria-controls="table_mb" role="tab">Motherboards</a></li>
    <li role="presentation" id="pr"><a href="#table_pr" data-toggle="tab" aria-controls="table_pr" role="tab">Processors</a></li>
    <li role="presentation" id="rm"><a href="#table_rm" data-toggle="tab" aria-controls="table_rm" role="tab">Ram</a></li>
    <li role="presentation" id="mr"><a href="#table_mr" data-toggle="tab" aria-controls="table_mr" role="tab">Monitor</a></li>
    <li role="presentation" id="hd"><a href="#table_hd" data-toggle="tab" aria-controls="table_hd" role="tab">Hard Disk</a></li>
  </ul>

使用具有不同按钮单击的特定表更改容器的内容

1 个答案: