首先是我的原始代码;
<!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>
并完整填写“ menubaperium.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>
但是当我使用脚本版本时,我的菜单没有水平排列,我在互联网上进行了搜索,但找不到解决方案。我希望有人可以帮助我。
首先是我的原始代码;