Ссылка на другую страницу с элементом jQuery

Question

Название может показаться немного запутанным, потому что я не знаю, как это сказать, но вот моя ситуация.

Допустим, у меня есть две страницы. Одна из них - моя домашняя страница, а другая - демонстрационная страница.

Что я хотел бы сделать, так это. Когда я нажимаю ссылку Showcase 1 на индексной странице, я хочу, чтобы браузер перешел на страницу витрины и автоматически открыл первую витрину. Возможно ли это?

Домашняя страница содержит фрагмент кода следующим образом:

<a href="#">Showcase 1</a> 
 
<a href="#">All Showcases</a>

Витрина страница имеет фрагмент следующим образом:

$(document).ready(function() { 
 
    
 
    $('.showcases').css('display', 'none'); 
 
    
 
    $('#showcase-link-one').click(function() { 
 
    $('#showcase-two').stop(true, true).hide('fast'); 
 
    $('#showcase-three').stop(true, true).hide('fast'); 
 
    $('#showcase-one').stop(true, true).show('fast'); 
 
    }); 
 
    
 
    $('#showcase-link-two').click(function() { 
 
    $('#showcase-one').stop(true, true).hide('fast'); 
 
    $('#showcase-three').stop(true, true).hide('fast'); 
 
    $('#showcase-two').stop(true, true).show('fast'); 
 
    }); 
 
    
 
    $('#showcase-link-three').click(function() { 
 
    $('#showcase-one').stop(true, true).hide('fast'); 
 
    $('#showcase-two').stop(true, true).hide('fast'); 
 
    $('#showcase-three').stop(true, true).show('fast'); 
 
    }); 
 

 
});

ul { 
 
    list-style-type: none; 
 
} 
 

 
.showcase-link { 
 
    text-decoration: none; 
 
} 
 

 
.showcase-link:hover { 
 
    color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="showcase-header"> 
 
    <ul> 
 
    <li><a href="#" id="showcase-link-one" class="showcase-link">Showcase One</a></li> 
 
    <li><a href="#" id="showcase-link-two" class="showcase-link">Showcase Two</a></li> 
 
    <li><a href="#" id="showcase-link-three" class="showcase-link">Showcase Three</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="showcases" id="showcase-one"> 
 
    <p>You Clicked on Showcase One</p> 
 
</div> 
 
<div class="showcases" id="showcase-two"> 
 
    <p>You Clicked on Showcase Two</p> 
 
</div> 
 
<div class="showcases" id="showcase-three"> 
 
    <p>You Clicked on Showcase Three</p> 
 
</div>

Answer 1

Один из способов сделать это - установить хеш в URL-адресе при нажатии этой ссылки.

<a href="http://example.com/#link-one">Showcase 1</a> 

Затем с JS вы можете проверить хэш с window.location.hash и откройте правую витрину.

Допустим, вы сохранить все интерактивные витрины в массиве

var showcase = ['#link-one', '#link-two', '#link-three']; 

$(document).ready(function() { 

    $('.showcases').css('display', 'none'); 

    $('#showcase-link-one').click(function() { 
    $('#showcase-two').stop(true, true).hide('fast'); 
    $('#showcase-three').stop(true, true).hide('fast'); 
    $('#showcase-one').stop(true, true).show('fast'); 
    }); 

    $('#showcase-link-two').click(function() { 
    $('#showcase-one').stop(true, true).hide('fast'); 
    $('#showcase-three').stop(true, true).hide('fast'); 
    $('#showcase-two').stop(true, true).show('fast'); 
    }); 

    $('#showcase-link-three').click(function() { 
    $('#showcase-one').stop(true, true).hide('fast'); 
    $('#showcase-two').stop(true, true).hide('fast'); 
    $('#showcase-three').stop(true, true).show('fast'); 
    }); 

    if($.inArray(window.location.hash, showcase)) // check to see if it's a showcase 
    $('#showcase-' + window.location.hash.replace('#')).trigger('click') 

}); 

Как это вы можете отправить информацию в связывании и использовать его на следующей странице.

Answer 2

Если вы измените код на следующую витрину, она будет работать при загрузке страницы.

$(document).ready(function() { 

    $('.showcases').css('display', 'none'); 

    $('#showcase-link-one').click(function() { 
    $('#showcase-two').stop(true, true).hide('fast'); 
    $('#showcase-three').stop(true, true).hide('fast'); 
    $('#showcase-one').stop(true, true).show('fast'); 
    }); 

    $('#showcase-link-two').click(function() { 
    $('#showcase-one').stop(true, true).hide('fast'); 
    $('#showcase-three').stop(true, true).hide('fast'); 
    $('#showcase-two').stop(true, true).show('fast'); 
    }); 

    $('#showcase-link-three').click(function() { 
    $('#showcase-one').stop(true, true).hide('fast'); 
    $('#showcase-two').stop(true, true).hide('fast'); 
    $('#showcase-three').stop(true, true).show('fast'); 
    }); 

    $('#showcase-link-one').trigger('click'); 
});