Question

我有水平标签式结构，它有4个标签，默认情况下打开ALL，按照此屏幕截图：

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>

Answer 1

我们的想法是通过网址传递参数，在这种情况下是dummy.html所请求的ID，并在offer.aspx中抓取

在你的dummy.html

中

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

在你的offer.aspx中，从网址中获取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);
        }
    });
}

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);


    }

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'); 
    } 
});

onclick on link应该打开unopen tabbed

3 个答案: