Question

我想用箭头导航我的导航。 forwoard和backwoards并返回到最后一个链接的第一个和第一个链接的最后一个链接。听起来像一个带链接的图像滑块。我不知道，如何更好地解释它。

如何浏览jquery / ajax中的链接？

这是我的代码：

<?php

require_once    '../include/config.inc.php';

if( isset( $_GET['site'] ) ){

    $site = $_GET['site'];

}else{

        $site = 'Home';
}


?>

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title><?= $site ?> | <?= $seiten_name ?></title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>

<body>
<!-- Start Main content -->
<div id="main">

<!-- Start Background Preloader -->
    <div class="background_pre">
    <!-- Start Preloader -->
        <div class="preloader"></div>
    <!-- End Preloader -->
    </div>
<!-- End Background Preloader -->

    <?php

        ////////////////
        // Navigation //
        ////////////////

        switch ( $site ) {

            case 'Info':
                include('info.php');
                break;

            case 'Projects':
                include('projects.php');
                break;

            case 'Contact':
                include('contact.php');
                break;

        }

    ?>

    <!-- Start Navigation -->
    <nav>
        <?php require('../include/navi.inc.php');?>
    </nav>
</div>
<!-- End Main content -->

<!-- Start Script -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/loader.js"></script>
<script type="text/javascript" src="js/navi.js"></script>
<!-- End Script -->
</body>
</html>

导航：

<ol>
    <li id="backward"><a href="#"><i class="fa fa-backward fa-2x"></i></a></li>
    <li><a class="selected" href="Home"><i class="fa fa-home fa-2x"></i></a></li>
    <li><a href="Info"><i class="fa fa-user fa-2x"></i></a></li>
    <li><a href="Projects"><i class="fa fa-code fa-2x"></i></a></li>
    <li><a href="Contact"><i class="fa fa-comments fa-2x"></i></a></li>
    <li id="forward"><a href="#"><i class="fa fa-forward fa-2x"></i></a></li>
</ol>

这是一个jsfiddel： https://jsfiddle.net/nuzggoxo/3/

我想用arows改变页面!!

希望，你会理解我的问题。

Answer 1

我不知道php，但你想要的是下一个/前一个箭头用一系列网址迭代。类似的东西：

var url_array={"index.html","otherpage.html","anotherpage.html"};
array_position=0;
OnNextClick()
{
array_position++;
window.location.href=url_array[array_position];
}

OnPreviousClick()
{
array_position--;
window.location.href=url_array[array_position];
}

Answer 2

试试这个：

导航：

<ol class="navigation">
    <li id="backward"><a href="#"><i class="fa fa-backward fa-2x"></i></a></li>
    <li><a <?=($site == 'Home') ? 'class="selected"' : ''?> href="Home"><i class="fa fa-home fa-2x"></i></a></li>
    <li><a <?=($site == 'Info') ? 'class="selected"' : ''?> href="Info"><i class="fa fa-user fa-2x"></i></a></li>
    <li><a <?=($site == 'Projects') ? 'class="selected"' : ''?> href="Projects"><i class="fa fa-code fa-2x"></i></a></li>
    <li><a <?=($site == 'Contact') ? 'class="selected"' : ''?> href="Contact"><i class="fa fa-comments fa-2x"></i></a></li>
    <li id="forward"><a href="#"><i class="fa fa-forward fa-2x"></i></a></li>
</ol>

使用Javascript：

var nav = $('.navigation');
$('#forward').click(function(e) {
    var nextItem = nav.find('.selected').parent().next().find('a');
    if(nextItem.length > 0) {
        window.location.href = nextItem.attr('href');
    }
    e.preventDefault();
    return false;
});
$('#backward').click(function(e) {
    var prevItem = nav.find('.selected').parent().prev().find('a');
    if(prevItem.length > 0) {
        window.location.href = prevItem.attr('href');
    }
    e.preventDefault();
    return false;
});

一个href滑块（如图像滑块，但带有链接）

2 个答案: