javascript - onclick 上的链接应该打开未打开的选项卡

Question

我有水平选项卡结构，它有 4 个选项卡，默认情况下全部打开，按照这个屏幕截图:

现在我的问题是，

我想要的是

假设我有一个 dummy.html 页面，上面有一个名为“Travel tab”的链接，当我单击该链接时，我将重定向到这个名为 offer.aspx 的选项卡式包含页面，我希望 Travel 选项卡应该在该页面上默认打开。

请在offers.aspx中找到分页结构的代码:

<script type="text/javascript">
    function showonlyone(thechosenone) {
        $('.newboxes').each(function (index) {
            if ($(this).attr("id") == thechosenone) {
                $(this).show(0);
            }
            else {
                $(this).hide(0);
            }
        });
    }
</script>

<div style="height: 30px;">

<div style="padding: 5px; float: left; color: #666;">
    <a id="myHeader1" class="bmark active" href="javascript:showonlyone('newboxes1');">All</a><span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
</div>

<div style="padding: 5px; float: left; color: #666;">
    <a id="myHeader2" class="bmark" href="javascript:showonlyone('newboxes2');">Travel</a><span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
</div>

<div style="padding: 5px; float: left; color: #666;">
    <a id="myHeader3" class="bmark" href="javascript:showonlyone('newboxes3');">Shopping</a><span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
</div>

<div style="padding: 5px; float: left; color: #666;">
    <a id="myHeader5" class="bmark" href="javascript:showonlyone('newboxes5');">Value Added Services</a>
</div>

<div>
<div class="newboxes" id="newboxes1" style="display: block; padding: 20px 5px 5px 5px; width: auto;">
</div>
<div class="newboxes" id="newboxes2" style="display: block; padding: 20px 5px 5px 5px; width: auto;">
</div>
<div class="newboxes" id="newboxes3" style="display: block; padding: 20px 5px 5px 5px; width: auto;">
</div>
<div class="newboxes" id="newboxes5" style="display: block; padding: 20px 5px 5px 5px; width: auto;">
</div>

Answer 1

我认为您可以在这种情况下使用散列。

在您的链接中，您使用内容的 ID 执行类似的操作:

<a href="offer.aspx#newboxes1">Travel</a>

在您的 offer.aspx 页面中，您查找哈希:

$(document).ready(function() {
    var hash = window.location.hash.replace('#', '');

    // Check if it has something
    if (hash != '') { 
        showonlyone(hash); 

        // Highlight the correct tab, triggering the event that does that :)
        var index = hash.replace('newboxes', ''); 
        $('#myHeader' + index).trigger('click'); 
    } 
});