Question

在我的引导网站上，我添加了 fullpage.js ，因此当一个动态类希望添加到页面中时。但是两个动态类同时添加在同一元素上。因此它改变了功能。

一个类仅添加到元素中。我试过了，但是没用。您能帮我解决这个问题吗？

这是我的代码，在此代码（ fp-tableCell ）类中添加了两次

<section class="icon-section fp-section fp-table active" id="section-1">
<div class="fp-tableCell" style="height:600px;">
<div class="fp-tableCell" style="height:600px;">
                <div class="container">
                  <div class="row">
                    <div class="col-md-9 col-sm-12 col-xs-12">
                      <img src="images/product-1.png" alt="img" class="max-width">
                    </div>
                    <div class="col-md-5 col-sm-12 col-xs-12 banner-txt">
                      <h3 class="preHeading"">volant</h3>
                      <h1 class="mainHeading">an icon for iconoclasts</h1>
                      <p class="description">Our singular purpose was to create a product not<br>
                         bound by convention. 
                        Volant is the realization of that<br> dream.</p>
                    </div>
                  </div>
                </div>
              </div>
</div>
</section>

Answer 1

生成两个<div>元素的代码似乎是minified，因此很难解释。我认为解决此问题的最简单方法是在文档加载后从所有<div>元素中删除重复的<section>元素。为此，您可以在关闭</body>标记之前插入以下代码：

<script>
var sectionElems = document.getElementsByTagName("section"); //creates an array containing all <section> elements
var outerDiv;
var innerDiv;

//loop through each <section> element found and remove duplicate <div> element
for(var i = 0; i < sectionElems.length; i++){
    outerDiv = sectionElems[i].children[0];
    innerDiv = outerDiv.children[0];
    //check class names to make sure it is a duplicate element
    if(outerDiv.className == innerDiv.className){
        outerDiv.innerHTML = innerDiv.innerHTML;
    }
}
</script>

此代码循环遍历每个<section>元素，并将嵌套的<div>元素的内容写入父<div>元素，基本上覆盖自身而不包含嵌套的<div>元素

同时在同一个元素上添加了两个动态类

1 个答案: