为什么当我使用脚本实现它时，我在 html 中的菜单上得到不同的维度

首先是我的原始代码;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="menu1.css">
</head>
<div id=menu>
<ul>     <!-- below is the classic vertical menu -->
<li><a class="home" href="home.asp">Home</a></li>
<li><a class="news" href="news.asp">News</a></li>
<li><a class="shop" href="shop.asp">Shop</a></li>
<li><a class="journey" href="about.asp">Our journey</a></li>
<li><a class="contact" href="contact">Contact</a></li>
<!-- search element-->
<!--  <input type="text" placeholder="Typuhhhh"> -->
</ul>
</div>
</html>

但是我希望它在外部，这样我就可以为每个页面更改一次，所以我做了以下操作;

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="menu1.css">
</head>
<div id="menu">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>$("#menu").html('<object data="menubaperium.html">');</script>
</div>

</html>

并完成"菜单.html

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="menu1.css">
</head>
<div id=menu>
<ul>     <!-- below is the classic vertical menu -->
<li><a class="home" href="home.asp">Home</a></li>
<li><a class="news" href="news.asp">News</a></li>
<li><a class="shop" href="shop.asp">Shop</a></li>
<li><a class="journey" href="about.asp">Our journey</a></li>
<li><a class="contact" href="contact">Contact</a></li>
<!-- search element-->
<!--  <input type="text" placeholder="Typuhhhh"> -->
</ul>
</div>

但是当我使用脚本版本时，我的菜单没有水平排列，我搜索了互联网，但我找不到解决方案。我希望有人可以帮助我..

好的，经过几天的搜索互联网并尝试，我找到了一个可行的解决方案。首先我更改了这部分;

<div id=menu>
<ul>     <!-- below is the classic vertical menu -->
<li><a class="home" href="home.asp">Home</a></li>
<li><a class="news" href="news.asp">News</a></li>
<li><a class="shop" href="shop.asp">Shop</a></li>
<li><a class="journey" href="about.asp">Our journey</a
</li>
<li><a class="contact" href="contact">Contact</a></li>
<!-- search element-->
<!--  <input type="text" placeholder="Typuhhhh"> -->
</ul>
</div>

对于这部分;

<body>
<nav id="navMenu"></nav>
<script src="menu.js"></script>
</body>

并完成菜单.js;

document.getElementById("navMenu").innerHTML =
'<ul>'+
'<li><a href=>"home.asp">Home</a></li>'+
'<li><a href="news.asp">News</a></li>'+
'<li><a href="shop.asp">Shop</a></li>'+
'<li><a href="about.asp">Our journey</a></li>'+
'<li><a href="contact.asp">Contact</a></li>'+
'</ul>';

希望这会帮助有同样问题的人。

相关内容

最新更新

热门标签：