点击链接时应该打开未打开的选项卡

Question

点击链接时应该打开未打开的选项卡

javascriptjquery

4

我有一个水平选项卡结构，其中有4个选项卡，所有选项卡默认都是打开的，如下面这张截图所示：

enter image description here

现在我的问题是，

我想要的是：

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

请查看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>

- user4388915

2

现在我的问题是，我没有看到任何问题。 - devqon

@devqon：请查看更新后的问题。 - user4388915

将一个片段添加到选项卡的URL中，例如 page.html#travel，然后使用 window.location.hash 来选择所选的选项卡。 - Rory McCrossan

@RoryMcCrossan：你能详细解释一下吗？ - user4388915

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kapantzak · Answer 1

这个想法是通过URL传递参数，例如请求的ID，在dummy.html中，并在offer.aspx中获取它。

在你的dummy.html文件中：

<a href="offer.aspx?id='newboxes2'">Travel tab</a>

在你的offer.aspx页面中，从URL中获取id并将其存储在DOM中（比如说在选项卡的包装div上）：

<%
Response.Write "<div id="wrapper" data-id='>" & Request.QueryString("id") & "'>"
%>

    <!-- tabs -->
</div>

然后使用jQuery获取data-id：

var id = $('#wrapper').data('id');

function showonlyone(id) {
    $('.newboxes').each(function (index) {
        if ($(this).attr("id") == id) {
            $(this).show(0);
        }
        else {
            $(this).hide(0);
        }
    });
}

- Aminul · Answer 2

将你的 dummy.html 页面链接设置为如下所示

dummy.html 页面：

<a href="sample.html#travel" >Travel</a>
<a href="sample.html#shopping">Shopping</a>

示例页面：

<div id='travel'>Travel</div>
<div id='shopping'>Shopping</div>

然后当您单击旅游或购物链接时，它应该重定向到示例页面的所需选项卡。

由于您正在使用ASP.NET，因此应尝试类似以下内容：

<asp:HyperLink runat="server" onclick="RunServerSideMethod_Click">Travel</asp:HyperLink>

以及你的服务器端方法：

protected void RunServerSideMethod_Click(Object sender, EventArgs e)
    {
        //Code which needs to be executed on serverside
       Response.Redirect("page.aspx" + "#here", false);


    }

- Everton Lenger · Answer 3

我认为在这种情况下你可以使用哈希。

在你的链接中，你可以像这样使用你内容的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'); 
    } 
});