HTML或JS导致的菜单错误

Menu error caused by HTML or JS?

本文关键字：菜单 错误 JS HTML      更新时间：2023-09-26

当您按下标志名称时，我试图使菜单水平，然后在菜单下方显示标志。

在更改代码中的菜单时，我应该编辑哪些文件？

标志的位置现在是正确的，但菜单放错了。如何将菜单设置为水平而不是列表？

JSFiddle：http://jsfiddle.net/528k9z8m/

HTML：

<body>
 <h1>Kmom03 sandboxen</h1>
<div id="content">
    <div id="menu">
        <ul>
            <li> <a href="#" id="draw-elfenbenskusten">Elfenbenskusten</a>
                <div id="flag-elfenbenskusten"></div>
            </li>
            <li> <a href="#" id="draw-sverige">Sverige</a>
                <div id="flag-sverige"></div>
            </li>
            <li> <a href="#" id="draw-maruritius">Maruritius</a>
                <div id="flag-maruritius"></div>
            </li>
            <li> <a href="#" id="draw-japan">Japan</a>
                <div id="flag-japan"></div>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="js/main.js"></script>

CSS

body {
    }
    h1 {
    text-align: center;
    }
h3 {
    color: green;
    }
#menu {
    width: 500px;
    height: 50px;
    border: 1px solid black;
    }
#content {
    border: 1px solid black;
    background-color: #eee;
    padding: 4em;
    margin: 0 auto;
    height: 800px;
    width: 800px;
    border-radius: 30px;
}
.flagga1 {
    position: relative;
    width: 800px;
    height: 500px;
}
.sverige {
    background-color: #FECC00;
}
.sverige .box1 {
    position: absolute;
    width: 250px;
    height: 200px;
    background-color: #006AA7;
}
.sverige .box2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 250px;
    height: 200px;
    background-color: #006AA7;
}
.sverige .box3 {
    position: absolute;
    top: 0;
    right: 0;
    width: 425px;
    height: 200px;
    background-color: #006AA7;
}
.sverige .box4 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 425px;
    height: 200px;
    background-color: #006AA7;
}
.flag {
    position: relative;
    width: 300px;
    height: 200px;
}
.elfenbenskusten {
    background-color: #fff;
}
.elfenbenskusten .part1 {
    width: 100px;
    height: 200px;
    background-color: #F77F00;
}
.elfenbenskusten .part2 {
    position: absolute;
    top: 0;
    left: 200px;
    width: 100px;
    height: 200px;
    background-color: #009e60;
}
.flagga2 {
    position: relative;
    width: 300px;
    height: 200px;
}
.maruritius {
    background-color: #EEE;
}
.maruritius .box1 {
    position: absolute;
    top: 0;
    width: 300px;
    height: 50px;
    background-color: #EA2839;
}
.maruritius .box2 {
    position: absolute;
    top: 50px;
    left: 0;
    width: 300px;
    height: 50px;
    background-color: #1A206D;
}
.maruritius .box3 {
    position: absolute;
    top: 100px;
    width: 300px;
    height: 50px;
    background-color: #FFD500;
}
.maruritius .box4 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 50px;
    background-color: #00A551;
}
.maruritius .box5 {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #006AA7;
}
.flagga3 {
    position: relative;
    height: 200px;
    width: 300px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
.japan .box1 {
    background-color: #FFFFFF;
}
.japan .cirkel1 {
    border-radius: 50%;
    position: absolute;
    top: 40px;
    left: 90px;
    width: 125px;
    height: 125px;
    background-color: #BC002D;
}

JS：

(function () {
'use strict';
//var myContent = document.getElementById('content');
//elfenbenskusten
var flagTarget = document.getElementById('flag-elfenbenskusten');
var flagLink = document.getElementById('draw-elfenbenskusten');
function drawFlagElfenbenskusten() {
    var flagElfenbenskusten = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>'
    flagTarget.innerHTML = flagElfenbenskusten;
}
flagLink.addEventListener("click", function () {
    console.log("event for clicking link elfenbenskusten.")
    drawFlagElfenbenskusten();
});


//sverige
var flagTargetSverige = document.getElementById('flag-sverige');
var flagLinkSverige = document.getElementById('draw-sverige');
function drawFlagSverige() {
    var flagSverige = '<div class="flagga1 sverige"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></div>'
    flagTarget.innerHTML = flagSverige;
}
flagLinkSverige.addEventListener("click", function () {
    console.log("event for clicking link elfenbenskusten.")
    drawFlagSverige();
});
//maruritius
var flagTargetMaruritius = document.getElementById('flag-maruritius');
var flagLinkMaruritius = document.getElementById('draw-maruritius');
function drawFlagMaruritius() {
    var flagMaruritius = '<div class="flagga2 maruritius"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div></div>'
    flagTarget.innerHTML = flagMaruritius;
}
flagLinkMaruritius.addEventListener("click", function () {
    console.log("event for clicking link elfenbenskusten.")
    drawFlagMaruritius();
});

//japan
var flagTargetJapan = document.getElementById('flag-japan');
var flagLinkJapan = document.getElementById('draw-japan');
function drawFlagJapan() {
    var flagJapan = '<div class="flagga3 japan"><div class="box1"></div><div class="cirkel1"></div></div>'
    flagTarget.innerHTML = flagJapan;
}
flagLinkJapan.addEventListener("click", function () {
    console.log("event for clicking link elfenbenskusten.")
    drawFlagJapan();
});
})();

#menu li {
    list-style-type: none;
    float: left;
    margin-right: 10px;
    position: relative;
}
#menu ul li>div {
    position: absolute;
    top: 20px;
}

Fiddle

我猜这就是你想要实现的原因

您必须编辑css，请尝试以下操作：

ul {
    float: left;
    width: 100%;
}
a {
    float: left;
    width: 6em;
    text-decoration: none;
    padding: 0.2em 0.6em;
}

li {
    display: inline;
}
相关文章：