Question

我是JavaScript的新手，我正在创建一个使用Facebook类似侧边菜单的项目。

在项目中有以下文件：

的index.html
menu.html
option1.html，option2.html等

在index.html处有一个打开侧边菜单的按钮。菜单中的每个X选项都会打开一个optionX.html文件，标题栏也是相同的，包括MENU按钮和徽标。

我需要做的是创建链接并从optionX.html打开其他文件，保留标题栏。

这是我的档案：

的index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Demo Menu</title>
    </head>
    <body>
        <div id="menuprincipal">
            <div id="wrapperMenu">
                <div class="scroller">
                    <div id="contenidoMenu"></div>
                </div>
            </div>
        </div>
        <div id="cuerpo">
            <div id="header"><a href="javascript:menu('menu');"><div class="btn">MENU</div></a><img class="logo" src="img/logo.png" /></div>
            <div id="wrapper">
                <div class="scroller">
                    <div id="contenidoCuerpo"></div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/fastclick.js"></script>
        <script type="text/javascript" src="js/iscroll.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

index.js

// Declaraci—n de variables globales
var myScroll, myScrollMenu, cuerpo, menuprincipal, wrapper, estado;

// Guardamos en variables elementos para poder rescatarlos despuŽs sin tener que volver a buscarlos
cuerpo = document.getElementById("cuerpo"),
menuprincipal = document.getElementById("menuprincipal"),
wrapper = document.getElementById("wrapper");

var xhReq = new XMLHttpRequest();

var app = {
    // Constructor de la app
    initialize: function() {
        // Estado inicial mostrando capa cuerpo
        estado="cuerpo";

        // Creamos el elemento style, lo a–adimos al html y creamos la clase cssClass para aplicarsela al contenedor wrapper
        var heightCuerpo=window.innerHeight-46;
        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = '.cssClass { position:absolute; z-index:2; left:0; top:46px; width:100%; height: '+heightCuerpo+'px; overflow:auto;}';
        document.getElementsByTagName('head')[0].appendChild(style);

        // A–adimos las clases necesarias
        cuerpo.className = 'page center';
        menuprincipal.className = 'page center';
        wrapper.className = 'cssClass';

        // Leemos por ajax el archivos opcion1.html de la carpeta opciones
        xhReq.open("GET", "opciones/opcion1.html", false);
        xhReq.send(null);
        document.getElementById("contenidoCuerpo").innerHTML=xhReq.responseText;

        // Leemos por ajax el archivos menu.html de la carpeta opciones
        xhReq.open("GET", "opciones/menu.html", false);
        xhReq.send(null);
        document.getElementById("contenidoMenu").innerHTML=xhReq.responseText;

        // Creamos los 2 scroll mediante el plugin iscroll, uno para el menœ principal y otro para el cuerpo
        myScroll = new iScroll('wrapper', { hideScrollbar: true });
        myScrollMenu = new iScroll('wrapperMenu', { hideScrollbar: true });

        this.bindEvents();
    },

    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },

    onDeviceReady: function() {
        // Ejecutamos la funci—n FastClick, que es la que nos elimina esos 300ms de espera al hacer click
        new FastClick(document.body);
    },

};

// Funci—n para a–adir clases css a elementos
function addClass( classname, element ) {
    var cn = element.className;
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

// Funci—n para eliminar clases css a elementos
function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}

function menu(opcion){

    // Si pulsamos en el bot—n de "menu" entramos en el if
    if(opcion=="menu"){
        if(estado=="cuerpo"){
            cuerpo.className = 'page transition right';
            estado="menuprincipal";
        }else if(estado=="menuprincipal"){
            cuerpo.className = 'page transition center';
            estado="cuerpo";    
        }
    // Si pulsamos un bot—n del menu principal entramos en el else
    }else{

        // A–adimos la clase al li presionado
        addClass('li-menu-activo' , document.getElementById("ulMenu").getElementsByTagName("li")[opcion]);

        // Recogemos mediante ajax el contenido del html segœn la opci—n clickeada en el menu
        xhReq.open("GET", "opciones/opcion"+opcion+".html", false);
        xhReq.send(null);
        document.getElementById("contenidoCuerpo").innerHTML=xhReq.responseText;

        // Refrescamos el elemento iscroll segœn el contenido ya a–adido mediante ajax, y hacemos que se desplace al top
        myScroll.refresh();
        myScroll.scrollTo(0,0);

        // A–adimos las clases necesarias para que la capa cuerpo se mueva al centro de nuestra app y muestre el contenido
        cuerpo.className = 'page transition center';
        estado="cuerpo";

        // Quitamos la clase a–adida al li que hemos presionado
        setTimeout(function() {
            removeClass('li-menu-activo' , document.getElementById("ulMenu").getElementsByTagName("li")[opcion]);
        }, 300);

     }

}

option1.html

<div class="borde-h1 color1"></div>
<h1>Title for Option 1</h1> 
<p align="justify"><strong>Los grandes misterios están más cerca de lo que piensas. </strong><br/><br/>

menu.html

<ul id="ulMenu">
    <li>Menu Principal</li>
    <li>
        <div class="borde-menu color1"></div>
        <a href="javascript:menu('1');">
            <div class="opcion">Introducción</div>
            <div class="descripcion">Los grandes misterios están más cerca de lo que piensas</div>
        </a>
    </li>
    <li>
        <div class="borde-menu color2"></div>
        <a href="javascript:menu('2');">
            <div class="opcion">Ver enclaves por Comunidad </div>
            <div class="descripcion">Lista de las comunidades autónomas para seleccionar sus enclaves</div>
        </a>
    </li>
    <li>
        <div class="borde-menu color3"></div>
        <a href="javascript:menu('3');">
            <div class="opcion">Opcion 3</div>
            <div class="descripcion">Descripcion opcion</div>
        </a>
    </li>
    <li>
        <div class="borde-menu color4"></div>
        <a href="javascript:menu('4');">
            <div class="opcion">Opcion 4</div>
            <div class="descripcion">Descripcion opcion</div>
        </a>
    </li>
    <li>
        <div class="borde-menu color5"></div>
        <a href="javascript:menu('5');">
            <div class="opcion">Opcion 5</div>
            <div class="descripcion">Descripcion opcion</div>
        </a>
    </li>
    <li>
        <div class="borde-menu color6"></div>
        <a href="javascript:menu('6');">
            <div class="opcion">Opcion 6</div>
            <div class="descripcion">Descripcion opcion</div>
        </a>
    </li>
    <li>
        <div class="borde-menu color1"></div>
        <a href="javascript:menu('7');">
            <div class="opcion">Opcion 7</div>
            <div class="descripcion">Descripcion opcion</div>
        </a>
    </li>
    <li>
        <div class="borde-menu color2"></div>
        <a href="javascript:menu('8');">
            <div class="opcion">Opcion 8</div>
            <div class="descripcion">Descripcion opcion</div>
        </a>
    </li>
    <li>
        <div class="borde-menu color3"></div>
        <a href="javascript:menu('9');">
            <div class="opcion">Opcion 9</div>
            <div class="descripcion">Descripcion opcion</div>
        </a>
    </li>
    <li>
        <div class="borde-menu color4"></div>
        <a href="javascript:menu('10');">
            <div class="opcion">Opcion 10</div>
            <div class="descripcion">Descripcion opcion</div>
        </a>
    </li>
</ul>

我想在option1.html中添加一个链接，该链接应该打开一个html文件但保留导航结构，这意味着保留菜单栏的菜单按钮和徽标。

我尝试使用普通的<a href>代码，但很明显该页面没有保留菜单栏。

Answer 1

如果你的项目是纯javascript（没有服务器端），那么你可以使用HTML作为模板，包含常见的HTML组件，如标题和菜单，然后在optionN.html文件中插入此模板文件的内容

检查this other StackOverflow question的答案，了解如何将HTML页面的内容插入另一页。

Answer 2

你可以尝试使用window.location.hash或frame，你也可以像Bootstrap一样使用Bootstrap＆＃39;切换卡

JavaScript项目，如何将链接插入另一个页面

2 个答案: