Javascript-使用錨來顯示/隱藏來自外部鏈接的表？

Question

我是Javascript新手，正在從事一個項目。 感謝在線幫助網站的幫助，我能夠成功顯示/隱藏我的桌子。

當我單擊h3元素時，它將打開並將錨點（在這種情況下為＃1，＃2，＃3）附加到URL。

我想使用此錨元素從另一個網頁的外部鏈接打開特定表。 （例如，在主頁上，我單擊此testing.html＃1，我希望它在到達該頁面時自動打開第一個表）

非常感謝你！

JAVASCRIPT

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}
        </script>

的CSS

<style>
        #special1{ display: none }

        h3 {text-align: center;
            background-color: black;
            color: white;
            clear: both;
            cursor: pointer;        }
            .newboxes {
            display: none;
        }

        a {text-decoration: none;}
                </style>

的HTML

    <a id="myHeader1" onclick="javascript:showonlyone('newboxes1');" href="#1"><h3>Table 1</h3></a>
    <table border="1" align="center" cellspacing="10px" class="newboxes" id="newboxes1">
    <tr>
    <td>1</td>
    </tr>
    </table>

    <a id="myHeader2" onclick="javascript:showonlyone('newboxes2');" href="#2"><h3>Table 2</h3></a>
    <table border="1" align="center" cellspacing="10px"  class="newboxes" id="newboxes2">
    <tr>
    <td>2</td>
    </tr>
    </table>

    <a id="myHeader3" onclick="javascript:showonlyone('newboxes3');" href="#3"><h3>Table 3</h3></a>
    <table border="1" align="center" cellspacing="10px"class="newboxes" id="newboxes3">
    <tr>
    <td>3</td>
    </tr>
    </table>

Answer 1

請注意，僅當您從同一域中的html頁面加載時，此方法才有效。

jQuery的.load函數非常通用。 要從testing.html加載第一個表，我們可以執行以下操作：

$('#tableContainer').load('testing.html table:eq(0)');

第二表：

$('#tableContainer').load('testing.html table:eq(1)');

等等。

演示請注意， 演示中的3個表是從此處加載的

如果URL以＃1結尾，並且您需要自動執行showonlyone（'newboxes1'）：

if (window.location.hash.substr(1) == '1') {
    showonlyone('newboxes1');
}