0
Я очень новичок в jQuery и имею только базовые навыки в HTML5 и CSS. Я пытался создать навигацию без использования кнопок или значков. Каждый код, который я нахожу и пытаюсь использовать, терпит неудачу. Пожалуйста помоги.Проведите навигацию по страницам
Это последняя загрузка на сервер - dtc-wsuv.org/jcohen/strings
код -
<!DOCTYPE html>
<html>
<head>
<!-- character sets for english-->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Strings</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<!-- Settings - View as App -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Icons -->
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/apple-touch-icon- 144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/apple-touch-icon- 114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/apple-touch-icon- 72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="images/apple-touch-icon- precomposed.png">
<!-- Startup Images -->
<!-- startup image for web apps - iPad - landscape (748x1024)
Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<link rel="apple-touch-startup-image" href="images/startup-ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<!-- startup image for web apps - iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="images/startup-ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<!-- startup image for web apps (320x460) -->
<link rel="apple-touch-startup-image" href="images/startup-iphone.png" media="screen and (max-device-width: 320px)" />
<!-- Jquery & Stylesheets -->
<link rel="stylesheet" type="text/css" href="styles.css"> <!-- styles.css link-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile- 1.0.min.js"></script>
<script>
$("#home").live('pageinit',function(event) {
//Add Back Button To pages
$.mobile.page.prototype.options.addBackBtn = "true";
$.mobile.page.prototype.options.backBtnText = "Go Back";
$('li').each(function(index) {
var elementId = $(this).attr("id");
var rel = $(this).attr("rel");
var text = $(this).text();
elementId = '#'+elementId;
var link = elementId + '.php';
//Add event listener for each li
$(function() {
$(elementId).live('swipe', function(event) {
//Load page that you swiped on.
$.mobile.changePage(elementId, {transition: "slideup"});
});
});
});
});
</script>
<div data-role="page" id="home">
<img src="images/homebkg.png">
<div data-role="content">
<ul data-role="listview" id="swipelist">
<li id='lomax'><a href="">lomax</li>
<li id='mctell'><a href="">mctell</li>
<li id='leadbelly'><a href="">leadbelly</li>
<li id='hurt'><a href="">hurt</li>
<li id='cotten'><a href="">cotten</li>
<li id='sonhouse'><a href="">sonhouse</li>
</ul>
</div>
</div>
<div data-role="page" id="lomax">
<div data-role="content"> <!-- content -->
<div class="bio">
<img src="images/jlomax.png">
<p>
The preservation of early American folk music...
</p>
</div>
</div>
<div class="audioplayer">
<audio controls="controls">
<source src="audio/lomax/all-the-pretty-little-horses.mp3" type="audio/mpeg">
<source src="audio/ostinato_i.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<div data-role="page" id="mctell">
<div data-role="content">
<div class="bio">
<img src="images/mctell.png">
<p>
William Samuel McTier (1898-1959, Thomson, GA) studied music from a young age...
</p>
</div>
</div>
<div class="audioplayer">
<audio controls="controls">
<source src="audio/mctell/bollweevil.mp3" type="audio/mpeg">
<source src="audio/ostinato_i.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
</div>...