Javascript - 使用Anchor从外部链接显示/隐藏表格?

时间:2014-07-28 04:20:34

标签: javascript jquery html css

我是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>

1 个答案:

答案 0 :(得分:0)

请注意,这仅适用于从同一域中的html页面加载的内容。

JQuery的.load功能非常通用。要从testing.html加载第一个表,我们可以这样做:

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

第二桌:

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

等等。

demo 请注意,演示中的3个表是从here

加载的

如果网址以#1结尾,您需要自动执行showonlyone('newboxes1'):

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