使用 JQuery 和 AJAX 导航在 html 个文件之间滑动切换

Question

我想知道是否有一种简单的方法可以在我的网站中实现许多单独的 html 文件之间的幻灯片过渡效果。我一直在搜索几个小时，但如果不重新设计网站，我找不到我正在尝试做的事情的例子。我正在使用 JQuery 和 AJAX 来验证页面上的选择，然后在一些服务器端验证后移动到选定的页面。这对我当前的设计可能吗？谢谢

//JavaScript function
function getValue(aval) {

    $.ajax({
        url: 'Services.aspx/getSelection',
        type: "POST",
        dataType: "json",
        data: '{"aSelection":"' + aval + '"}',
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            //alert(data.d);
            if (data.d == 1) {
                window.location.href = "InsuredReason.html";
            }
            if (data.d == 2) {
                window.location.href = "AgentInfo.html";
            }
            if (data.d == 3) {
                window.location.href = "ContratistaInfo.html";
            }
            if (data.d == 4) {
                window.location.href = "VisitorInfo.html";
            }
        },
        error: function (er) {
            //alert(er.d);
        }
    });

  }

<!--HTML-->
    <nav id="razonAseg">
        <br>
        <img src="images/2.jpg" alt="Asegurado" width="315" height="628" class="smooth" id="Asegurado" border="0" onclick="getValue('1')"/>
        <img src="images/1.jpg" alt="Agente" width="315" height="628" class="smooth" id="Agente" border="0" onclick="getValue('2')"/>
        <img src="images/3.jpg" alt="Contratista" width="315" height="628" class="smooth" id="Contratista" border="0" onclick="getValue('3')"/>
        <img src="images/4.jpg" alt="Visitante" width="315" height="628" class="smooth" id="Visitante" border="0" onclick="getValue('4')"/>
    </nav>

Answer 1

您不需要重定向，最好用 html 个文件的内容更新页面的某些区域。

HTML 可以是：

<nav id="razonAseg">
    <br>
    <img src="images/2.jpg" alt="Asegurado" width="315" height="628" class="smooth" id="Asegurado" border="0" onclick="getValue('1')"/>
    <img src="images/1.jpg" alt="Agente" width="315" height="628" class="smooth" id="Agente" border="0" onclick="getValue('2')"/>
    <img src="images/3.jpg" alt="Contratista" width="315" height="628" class="smooth" id="Contratista" border="0" onclick="getValue('3')"/>
    <img src="images/4.jpg" alt="Visitante" width="315" height="628" class="smooth" id="Visitante" border="0" onclick="getValue('4')"/>
</nav>
<div id="content"></div>

而javascript不会重定向，而是更新内容：

function getValue(aval) {
    if (aval == 1) {
        filename = "InsuredReason.html";
    }
    if (aval == 2) {
        filename  = "AgentInfo.html";
    }
    if (aval == 3) {
        filename  = "ContratistaInfo.html";
    }
    if (aval == 4) {
        filename  = "VisitorInfo.html";
    }
    $.ajax({
        url: 'Services.aspx/'+filename,
        type: "GET",
        success: function (data) {
            //alert(data);
            $('#content').html(data);//where data is content of html file
        },
        error: function (er) {
            //alert(er.d);
        }
   });

}

使用 JQuery 和 AJAX 导航在 html 个文件之间滑动切换

Slide transition between html files using JQuery and AJAX to navigate

html

javascript

css

ajax

jquery