Javascript 由HTML或JS导致的菜单错误？_Javascript_Html_Css

Javascript 由HTML或JS导致的菜单错误？

javascript html css

Javascript 由HTML或JS导致的菜单错误？,javascript,html,css,Javascript,Html,Css,我试图让菜单水平，然后当你按下标志名称时，在菜单下方显示标志在我的代码中更改菜单时，我应该编辑哪些文件现在标志位置正确，但菜单位置错误。如何使菜单水平而不是列表 JSFiddle： HTML： <body> <h1>Kmom03 sandboxen</h1> <div id="content"> <div id="menu"> <ul> <li> <

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

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

现在标志位置正确，但菜单位置错误。如何使菜单水平而不是列表

JSFiddle：

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>

(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();
});
})();

JS：

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

(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();
});
})();

（函数（）{
"严格使用",；
//var myContent=document.getElementById（'content'）；
//埃尔芬本斯库斯滕
var flagTarget=document.getElementById（'flag-elfenbenskusten'）；
var flagLink=document.getElementById（'draw-elfenbenskusten'）；
函数drawlfenbenskusten（）{
var flagElfenbenskusten=“”
flagTarget.innerHTML=flagElfenbenskusten；
}
flagLink.addEventListener（“单击”，函数（）{
log（“单击链接elfenbenskusten的事件”）
drawFlagElfenbenskusten（）；
});
//斯维里奇
var flagTargetSverige=document.getElementById（'flag-sverige'）；
var flagLinkSverige=document.getElementById（'draw-sverige'）；
函数drawFlagSverige（）{
var flagSverige=''
flagTarget.innerHTML=flagSverige；
}
flagLinkSverige.addEventListener（“单击”，函数（）{
log（“单击链接elfenbenskusten的事件”）
drawFlagSverige（）；
});
//马吕提乌斯
var flagTargetMaruritius=document.getElementById（'flag-maruritius'）；
var flagLinkMaruritius=document.getElementById（'draw-maruritius'）；
函数drawFlagMaruritius（）{
var flagMaruritius=“”
flagTarget.innerHTML=flagMaruritius；
}
flagLinkMaruritius.addEventListener（“单击”，函数（）{
log（“单击链接elfenbenskusten的事件”）
drawFlagMaruritius（）；
});
//日本
var flagTargetJapan=document.getElementById（'flag-japan'）；
var flagLinkJapan=document.getElementById（'draw-japan'）；
函数drawFlagJapan（）{
var flagJapan=“”
flagTarget.innerHTML=flagJapan；
}
flagLinkJapan.addEventListener（“单击”），函数（）{
log（“单击链接elfenbenskusten的事件”）
日本（）；
});
})();

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

ul {
    float: left;
    width: 100%;
}

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

}


li {
    display: inline;
}

我猜这就是你想要实现的

谢谢，这确实解决了大部分问题。现在看来，标志在前两个链接之间打开。我现在很确定这是由我的JS引起的。最有可能使用`flagTarget.innerHTML´。不知道该怎么办。