Nexus, спасибо за ответ. У меня почти все получилось с помощью jquery mobile. Но появилась следующая проблема, прошу взглянуть на мой код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name=viewport>
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>test</title>
</head>
<body>
<div class="wrapper">
<section class="articles">
<div class="section">
<h2 class="title_section">Editorial:</h2>
<article class="article">
<div class="leopard_link">
<h3 class="title_article">What's the Story?</h3>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio ipsa deserunt nisi eaque veniam explicabo laborum aliquam odit et velit possimus est quae error doloremque, ullam iusto voluptatem quis recusandae!</div>
</div>
</article>
</div>
<div class="section">
<h2 class="title_section">Recommended Products:</h2>
<article class="article">
<div class="cheetah_link">
<h3 class="title_article">Buy put options to hedge your equity exposure</h3>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio ipsa deserunt nisi eaque veniam explicabo laborum aliquam odit et velit possimus est quae error doloremque, ullam iusto voluptatem quis recusandae!</div>
</div>
</article>
</div>
</section>
</div>
<script>
$(function() {
var page_leopard = $('.leopard_link'),
page_cheetah = $('.cheetah_link');
page_leopard.on( "swipeleft", swipeleftHandler );
function swipeleftHandler( event ){
$(location).attr('href', 'http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/Leopard-tree.ngsversion.1477048906275.adapt.945.1.jpg');
}
page_cheetah.on( "swipeleft", swipeleftHandler );
function swipeleftHandler( event ){
$(location).attr('href', 'http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/A-G/cheetah-watching.ngsversion.1396530528126.adapt.945.1.jpg');
}
});
</script>
</body>
</html>
На этой странице 2 разных ссылки, для примера я выбрал фото больших кошек: 1. Леопард; 2. Гепард. Почему когда происходит свайп по первой ссылке, переход происходит на вторую? Подскажите плизз, в чем моя ошибка?