Onclick on link should open unclosed tabs

Question

I have a horizontal tabbed structure that has 4 tabs and ALL opens by default, according to this Screenshot:

Now my questions are:

I want to

Suppose I have one dummy.html page on which I have one link, called the Travel tab. When I click on this link, I redirect to this tab containing a page called offer.aspx, where I want the Travel tab to open by default.

Please find the nested structure code on offer.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

I think you can use a hash in this case.

- , :

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

Answer 2

, url, id, dummy.html offer.aspx

dummy.html

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

.aspx URL- DOM (, div ):

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

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

jquery:

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 3

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>

, "" "", " "

As you use ASP.NET, you should try something like this:

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

and your server side method:

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


    }