Question

我有一个包含多个部分的拉伸部分。这些部分在我的CSS中对齐为“Justified”。在普通的HTML代码中，这很好用。像这样：

Normal HTML - Example 1 我想用js innerhtml创建这个菜单。这是因为菜单上的<a>标记包含javascript函数。问题是，<a href>必须在js可用时执行javascript函数，否则必须打开普通的url。

我尝试过类似的东西，但是当js可用时，浏览器仍会在执行该功能后打开href url（当然）。

<a href='when_js_is_not_available.html' onclick='whenJsIsAvailable()'>Link</a>

我发现了一些东西：

<section id=menu>
    <script>
        loadMenu();
    </script>

    <noscript>
        //Working html code, as showed on example 1
    </noscript>
</section>

Javascript：

function loadMenu(){
    document.getElementById('menu').innerHTML=""
            +"<a href='javascript:about()'><section class='linkNav'>Over NKika</section></a>"
            +"<a href='javascript:donate()'><section class='linkNav'>Doneren</section></a>"
            +"<a href='#'><section class='linkNav'>Inschrijven</section></a>"
            +"<a href='#'><section class='linkNav'>Fotos</section></a>"
            +"<a href='#'><section class='linkNav'>Links</section></a>"
            +"<section id='stretch'></section>";
}

这将返回与示例1相同的html代码。但是，样式不一样：
Wrong styling。拉伸或其他类似的东西出了问题。

问题与CSS无关，因为在示例1中一切都很好。

Chrome和Firefox的开发者工具中的代码看起来完全相同。

我在这方面工作了好几个小时，并尝试了很多，但我不知道如何解决这个问题。谢谢你的帮助。

Answer 1

怎么样：

<script>
var onclicks=document.querySelectorAll('a[onclick]');
for (index in onclicks)
{
onclicks[index].href='#';
}
</script>

我们选择具有已定义onclick事件的每个锚点，然后将其href属性设置为#。因此，如果浏览器具有JS，则会触发，并删除href。如果没有JS，那么这当然不会触发，原始href将保持不变。

Javascript Innerhtml - 奇怪的风格的东西

1 个答案: