隐藏的标签未显示正确的布局

问题描述 投票：0回答：1

我正在为朋友开发一个页面，目标是将沙丁鱼罐作为一种菜单来显示一些细节。

在使用标签之前，它在图像中显示正常工作：

enter image description here

使用选项卡后我丢失了原来的布局......任何人都有一个线索如何解决这个问题？我确定我的问题出在我的CSS中。

二手代码：

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Mar de Sardinhas</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i" rel="stylesheet">



<!-- scripts de visivel / invisivel


<script type="text/javascript">

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

</script>

 css para styling -->


<style type="text/css">

.off {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);


}

.on {


}

.position{

  position: relative;
  bottom: -30%;
  transition: 0.3s;

}

.position:hover {

  position: relative;
  bottom: 0%;
  transition: 0.3s;

}


.imgsize{

  max-width: 10vw;

}


.wide-as-needed {
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: auto;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap; width:100%;
}

.fundo{


    background:rgba(255,255,255,0.5);

}

.texto {
    font-family: 'Open Sans', sans-serif;
}

.preview{ 

    max-width:100%;
    max-height:100%;

}

.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 255, 255, 0.9), 
      rgba(255, 255, 255, 0.7), 
      rgba(255, 255, 255, 0.7), 
      rgba(255, 255, 255, 0)
    ),
    /* bottom, image */
    url(bg.jpeg);
}
.lata {
  position: relative;
  text-align: center;
  color: white;
}

.hide {
  display:none;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

</style>







</head>


<body background="bg.jpeg" class="tinted-image" style="background-attachment: fixed;">

<div class= "row tabcontent" id="London">

<!-- parte do texto episodio 1-->

<div class="col-sm-12 col-lg-4 m-4 " style="overflow-y:scroll; max-height: 65vh; position: static;">

    <div class="texto m-2">
        <h2>Origens</h2>

        <p>
A arte de conservar alimentos foi sempre uma constante na história da humanidade. Os métodos mais ancestrais como a defumação e a salga permitiram o consumo de peixe em larga escala e o seu transporte para zonas distantes do litoral. Até o século XVII, parte do pescado conservado tinha por objectivo o fornecimento de navios envolvidos na expansão Ultramarina. 
No entanto Portugal tem uma tradição milenar na conservação de pescado que remonta ao período grego e romano, com a produção do Garum – uma afamada conserva de sangue e vísceras de peixes que se deixava a secar em salmoura e que era exportada para todo o mediterrâneo.
        </p>

    </div>

    <div class="texto">

        <h2><i>Origins</i></h2>
        <p><i>
The art of preserving food has always been a constant in the history of mankind. More ancestral methods such as smoking and salting have allowed the consumption of fish on a large scale and its transport to areas far from the coast. Until the seventeenth century, part of the preserved fish had the objective of supplying ships involved in the Overseas expansion.
However Portugal has a millennial tradition in the conservation of fish that goes back to the Greek and Roman period, with the production of Garum - a famous preserve of blood and viscera of fish that was allowed to dry in brine and that was exported to all the Mediterranean.</i> </p>

    </div>
</div>

<!-- segunda coluna episodio 1-->
<div class="col m-4 ">


        <div >
        <img src="e01.png"  class="preview mt-2">
        </div>

        <div class="d-flex justify-content-center ">
        <a href="#" class="btn btn-info mt-2 texto" role="button" aria-pressed="true">Ver Filme / Watch Movie</a>
        </div>




</div>

</div>  


<div class= "row tabcontent" id="Paris">

<!-- parte do texto episodio 1-->

<div class="col-sm-12 col-lg-4 m-4 " style="overflow-y:scroll; max-height: 65vh; position: static;">

    <div class="texto m-2">
        <h2>Origens 2</h2>

        <p>
testeeee
No entanto Portugal tem uma tradição milenar na conservação de pescado que remonta ao período grego e romano, com a produção do Garum – uma afamada conserva de sangue e vísceras de peixes que se deixava a secar em salmoura e que era exportada para todo o mediterrâneo.
        </p>

    </div>

    <div class="texto">

        <h2><i>Origins</i></h2>
        <p><i>
The art of preserving food has always been a constant in the history of mankind. More ancestral methods such as smoking and salting have allowed the consumption of fish on a large scale and its transport to areas far from the coast. Until the seventeenth century, part of the preserved fish had the objective of supplying ships involved in the Overseas expansion.
However Portugal has a millennial tradition in the conservation of fish that goes back to the Greek and Roman period, with the production of Garum - a famous preserve of blood and viscera of fish that was allowed to dry in brine and that was exported to all the Mediterranean.</i> </p>

    </div>
</div>

<!-- segunda coluna episodio 1-->
<div class="col m-4 ">


        <div >
        <img src="e01.png"  class="preview mt-2">
        </div>

        <div class="d-flex justify-content-center ">
        <a href="#" class="btn btn-info mt-2 texto" role="button" aria-pressed="true">Ver Filme / Watch Movie</a>
        </div>




</div>

</div>  

<!-- barra de baixo-->


<div class="container-fluid fixed-bottom">


    <div class="row flex-row flex-nowrap ml-1 mr-2 wide-as-needed">

        <div>
            <a href="#" class="tablinks" onclick="openCity(event, 'London')">
        <img src="1.png"  class="on position imgsize">
            </a>
        </div>

        <div>
            <a href="#" class="tablinks" onclick="openCity(event, 'Paris')">
        <img src="2.png" class="off position imgsize">
        </a>
        </div>

        <div>
        <img src="3.png" class="off position imgsize">
        </div>

        <div>
        <img src="4.png"  class="on position imgsize">
        </div>

        <div>
        <img src="1.png" class="off position imgsize" >
        </div>

        <div>
        <img src="1.png" class="on position imgsize">
        </div>

        <div>
        <img src="1.png" class="on position imgsize">
        </div>

        <div>
        <img src="1.png" class="on position imgsize">
        </div>

        <div>
        <img src="1.png" class="on position imgsize">
        </div>

        <div>
        <img src="1.png" class="on position imgsize">
        </div>

    </div>
</div>
</div>


<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
</body>
</html>

该页面可以在这里找到：working page

先感谢您！

html css layout tabs
1个回答
2
投票

使用Bootstrap 4时，可见的“行”类的显示值应为“flex”。在JavaScript的这一行中，您的“tabcontent”DIV被覆盖以显示“block”：

document.getElementById(cityName).style.display = "block";

将“block”切换为“flex”，你应该得到你正在寻找的行为。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.