【问题标题】:html not showing javascript code insertedhtml不显示插入的javascript代码
【发布时间】:2015-07-21 03:23:07
【问题描述】:

感谢阅读这篇文章,我正在尝试向网站添加菜单,但我想使用脚本来完成,问题是页面没有显示任何内容我不知道我做错了什么,这是我调用函数的方式

<head>
<link href="../css/menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="header">
<script src="../includes/menu.js"></script><!-- end .header --></div>
<div class="content">
</body>

js文件在这里

<Script Language="JavaScript">
document.write("<div id='cssmenu'>\
<ul>\
<li class='active'><a href='homeuccgestion.php'><span>Inicio</span></a>         </li>\
<li><a href='nuevoformato.php'><span>Prestamos</span></a></li>\
<li class='has-sub'><a href='#'><span>Consultas</span></a>\
<ul>\
<li><a href='consultas.php'><span>Movimientos</span></a></li>\
<li class='last'><a href='editar_instrumento.php'><span>Inventario</span>  </a></li>\
</ul>\
</li>\
<li class="has-sub"><a href='#'><span>Edici&oacute;n</span></a>\
<ul>\
<li><a href='editar_unidad.php'><span>Unidades</span></a></li>\
<li><a href="editar_usuarios.php">Usuarios</a></li>\
</ul>\
</li>\
<li><a href='contacto.php'><span>Contacto</span></a></li>\
<li class='last'><a href='#'><span>Apartar Prestamo</span></a></li>\ 
</ul>\
</div>\
\    
\
");
</Script>

这是一些css代码

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
width:990px;
height: 49px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #141414;
}

提前感谢任何帮助将不胜感激

【问题讨论】:

  • 当它只是硬编码 html 时,为什么要让 javascript 添加一个菜单?
  • 几乎可以肯定有比document.write 更好的方法,这通常被认为是过时的。
  • 如果你使用的是外部js,那么js文件中不需要&lt;script&gt;标签
  • 脚本标签导致错误并停止执行您的脚本。
  • 听起来您应该查看服务器端模板引擎,或者可能是 SSI(服务器端包括)。使用原始 JavaScript 进行模板并不是一个好主意。

标签: javascript html css menu


【解决方案1】:

document.write 只是写在正文中。

如果你想通过脚本添加 HTML,首先在 String 变量中正确地组成 HTML,比如,

var html = '';
html += '<div id='cssmenu'>'
     +    '<ul>'
     +      '<li class='active'><a href='homeuccgestion.php'><span>Inicio</span></a></li>'
     + ..................
     +     '</ul>'
     +   '</div>' ;

现在,当您的 HTML 字符串准备好后,将其添加到您要显示的任何位置,

document.getElementById("myMenuElement").innerHTML = html;

你的 HTML 应该有 id myMenuElement

<head>
  <link href="../css/menu.css" rel="stylesheet" type="text/css">
  <script src="../includes/menu.js"></script>
</head>
<body>
  <div class="container">
    <div class="header">      
      <div id="myMenuElement"></div>
    </div>
  <div class="content"></div>
</body>

如果这不是您想要的,请在 cmets 中告诉我,我会更新我的答案。

谢谢。

【讨论】:

  • 看来这正是我所需要的,我会尝试并告诉你会发生什么谢谢!
  • 欢迎@Juancadiyjohndiy
  • 你会推荐用php还是js来做这个?
  • @Juancadiyjohndiy,在我看来,如果 html 真的很大,用 php 来做会更好。但这完全取决于开发人员想要实现的目标。 :)
猜你喜欢
  • 2018-03-11
  • 2022-01-10
  • 1970-01-01
  • 1970-01-01
  • 2017-08-13
  • 1970-01-01
  • 2017-07-07
  • 2011-07-26
相关资源
最近更新 更多