JavaScript项目，如何插入指向其他页面的链接_Javascript_Html

JavaScript项目，如何插入指向其他页面的链接

javascript html

JavaScript项目，如何插入指向其他页面的链接,javascript,html,Javascript,Html,我是JavaScript新手，我正在创建一个使用Facebook类似侧菜单的项目项目中有以下文件： index.html menu.html option1.html、option2.html等。在index.html上有一个按钮可以打开侧菜单。菜单中的每个X选项都会打开一个optionX.html文件，标题栏是相同的，包括菜单按钮和图标我需要做的是创建链接并从optionX.html打开其他文件，保持标题栏这是我的文件： index.html： <!DOCTYPE html>

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

项目中有以下文件：

index.html menu.html option1.html、option2.html等。在index.html上有一个按钮可以打开侧菜单。菜单中的每个X选项都会打开一个optionX.html文件，标题栏是相同的，包括菜单按钮和图标

我需要做的是创建链接并从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>

选项1.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文件，但保留导航结构，这意味着保留带有菜单按钮和徽标的菜单栏

我试过使用普通标记，但显然页面没有保留菜单栏。

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

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

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

检查答案以了解如何将HTML页面的内容插入另一个页面。

您可以尝试使用window.location.hash或frame，也可以像Bootstrap“开关卡”一样使用Bootstrap

嗯。。。您可以使用href=javascript:openfile'option1.html'创建一个标记，然后创建函数openfile。它应该是这样的：location.replacehttp://mywebsite.com/ +传递参数；好您可以使用href=javascript:openfile'option1.html'创建一个标记，然后创建函数openfile。它应该是这样的：location.replacehttp://mywebsite.com/ +传递参数；

<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>