0

私はボタンについてあまり詳しくないhtmlのでjquery、これが繰り返しの質問であるか、間違った質問である場合はご容赦ください。私がやりたいことはtab、外部ボタンのクリックでロードすることです。タブのコードは次のとおりです。

<div id="wrapper">
    <div id="content">
        <div class="c1">
            <div class="controls">

            </div>
            <div class="tabs">
                <div id="tab-1" class="tab">
                    <article>
                        <div class="text-section">
                            <h1>Dashboard</h1>
                            <p>TVAS data visualizer</p>
                        </div>
                        <div style="margin-top: 10px;margin-left: 10px;width: 21%;height: 20px; float: left">
                                <input type="button" id="btn" name="btn" value="Button" />
                                <div style="margin-left: 15px; float: left">
                                Filter :
                                </div>                                

                                     <div id='jqxdropdown' style="margin-left: 5px; float: left">                                    
                                </div>

                        </div>
                        <div style="margin-top: 10px;width: 78%;height: 20px; float: right">

                                <div id='jqxcalendar' style="margin-left: 10px;float: left;"></div> 
                                <div style="margin-left: 10px;float: left;">                                        
                                    <input id="filterButton" type="button" value="Filter"/>
                                </div> 
                                <div style="margin-left: 10px; float: left">
                                <font size="1" color="red">
                                    *Filter by ISP only applies to the bar/pie chart
                                </font>
                                </div>

                        </div>

                        <div id="barChartdiv" style="margin-top: 10px;width:60%; height: 400px;float: left;"></div>
                        <div id="pieChartDiv" style="margin-top: 10px;width:40%; height: 400px;float: right;"></div>
                        <div id="linechartdiv" style="width: 100%; height: 500px;float: left;"></div>


                    </article>
                </div>
                <div id="tab-2" class="tab">
                    <article>
                        <div class="text-section">
                            <h1>Map view</h1>
                            <p>TVAS birds eye view</p>
                        </div>

                        <div id="google_map_canvas" style="margin-top: 10px;width:1450px; height: 650px;float: left;">

                        </div>

                        <div id="over_map">
                            <input id="outgoingButton" type="button" value="Outgoing"/>
                            <input id="incomingButton" type="button" value="Incomng"/>
                        </div>


                    </article>
                </div>
                <div id="tab-3" class="tab">   
                    <article>
                        <div class="text-section">
                            <h1>Dashboard</h1>
                            <p>TVAS trend visualizer</p>
                        </div>



                    </article>
                </div>                  
            </div>
        </div>
    </div>
    <aside id="sidebar">
        <strong class="logo"><a href="#">lg</a></strong>
        <ul class="tabset buttons">
            <li class="active">
                <a href="#tab-1" class="ico1"><span>Dashboard</span><em></em></a>
                <span class="tooltip"><span>Dashboard</span></span>
            </li>
            <li>
                <a href="#tab-2" class="ico2"><span>Map visualization</span><em></em></a>
                <span class="tooltip"><span>Map visualization</span></span>
            </li>
            <li>          
                <a href="#tab-3" class="ico3"><span>Trending</span><em></em></a>
                <span class="tooltip"><span>Trending</span></span>
            </li>               
        </ul>
        <span class="shadow"></span>
    </aside>
</div>

このコードが現在行っていることは、ユーザーが必要なサイドバー要素をクリックするdivと、ページの左側に対応する要素が読み込まれることです。ボタンをクリックして同じことをする必要があるかjquery、javascriptページのヘッダー領域にあるもの。

たとえば、このようなもの、

<script type="text/javascript">
    $(document).ready(function () {
        $("input[name='btn']").click(function() {
            //code to display the contents of a tab
        });
    });
</script>

どんな助けでも非常に役に立ちます:)この質問をさらに明確にする方法がわかりません。理解できることを願っていますありがとう:)

4

1 に答える 1

0

これでうまくいくと思いますが、もっと簡潔な方法があると確信しています。

$("#tab-1").click(function() {
    $(".tab").hide();
    $("#tab-1").show();
});
$("#tab-2").click(function() {
    $(".tab").hide();
    $("#tab-2").show();
});
$("#tab-3").click(function() {
    $(".tab").hide();
    $("#tab-3").show();
});

更新:ここでテストしたように、これは実際に機能します (クラスと ID セレクターを命名規則に変更してください) 。

$().ready(function() {
    $(".show-tab").click(function() {
        $(".tab").hide();
        var tabid = $(this).attr("id").substring(5);
        $("#"+tabid).show();
    });
    $("#show-tab-1").click();
});
于 2013-01-31T05:24:04.460 に答える