javascript - 响应式网站因选择标签而失败
问题描述
我正在创建一个房地产网站，这是第一页。它应该是响应式的（多个尺寸屏幕上的相同视图）
但
首先单击“Vanzari Apartamente”（中间导航的第一个按钮）。
我的选择标签中有一些带有“De la”和“Pana la”的东西
在调整大小时，它们会下降。
问题是它们不应该而且应该在调整大小时保持不变。
我试图管理所有利润，但似乎没有任何效果。
function closeAllContent() {
var i, tabcontent;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style = "";
console.table([tabcontent[i].style.display, tabcontent[i].style.transition, tabcontent[i].style.opacity]);
}
}
function openContent(event, cityName) {
document.getElementById(cityName).style.transition = 'opacity 0.5s ease-in-out';
document.getElementById(cityName).style.display = "block";
document.getElementById(cityName).style.opacity = 1;
event.currentTarget.className += " active";
console.table([document.getElementById(cityName).style.display, document.getElementById(cityName).style.transition, document.getElementById(cityName).style.opacity]);
} * {
box-sizing: border-box;
}
*::selection {
background-color: yellow;
}
body, html {
margin: 0;
padding: 0.9vh 0.2vw;
height: 10000px;
overflow-x: hidden;
}
body {
background-color: lightgreen;
}
main {
background-color: rgba(123, 203, 123);
}
br {
user-select: none;
}
select {
outline: none;
margin: 1.2vh 0.3vw;
border-radius: 0.6vw;
padding: 0 1.2vw;
font-size: 0.85vw !important;
-webkit-appearance: none;
border: none;
}
::placeholder {
appearance: none;
font-size: 1.5vw !important;
}
#header {
width: 100%;
height: 9000px;
background-image: url("../Images/PozaFundal.jpg");
background-repeat: no-repeat;
background-size: 100% 98vh;
border-bottom: solid 0.1vw rgb(0, 209, 156);
margin: auto;
padding-top: 1vh;
}
#navul {
list-style-type: none;
background-color: rgb(0, 170, 130);
margin: 0;
padding: 0;
overflow: hidden;
position: sticky;
top: 0;
z-index: 1;
border-bottom: solid 0.1vw rgb(0, 209, 156);
}
#navul>li {
float: left;
}
#navul>li>a {
display: block;
color: white;
text-align: center;
padding: 1.3vh 3.3vw;
text-decoration: none;
font-family: 'Forte';
font-size: 1.4vw;
border-right: solid 0.1vw rgb(0, 209, 156);
}
.navfirst {
border-left: solid 0.1vw rgb(0, 209, 156);
}
.navlast {
float: right !important;
border-left: solid 0.1vw rgb(0, 209, 156);
}
#navul>li>a:hover {
background-color: rgb(50, 50, 50)
}
#navul>li.active {
background-color: rgb(90, 90, 90);
}
img {
z-index: 0;
}
.title {
text-align: center;
left: 0;
top: 0;
background-color: white;
opacity: 0.6;
text-shadow: -1vw 0 white, 0 1vw white, 1vw 0 white, 0 -1vw white;
font-size: 3vw;
color: rgb(104, 71, 37);
font-weight: 900;
padding: 1vw;
font-family: Arial;
}
.tab {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
overflow: hidden;
float: center;
}
.tablinks {
background-color: rgb(204, 204, 204);
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 1vh;
margin: 1.34vh 1.5vw;
/* transition: 0.2s; */
font-size: 1.1vw;
border-radius: 0.5vw;
width: 10%;
/* 100 / nr tablinks */
height: 2%;
}
.tablinks:hover {
background-color: rgb(177, 177, 177);
}
/*.tablinks.active:not(.adaugaAnunt) {
background-color: rgb(135, 135, 135);
border-radius: 8px;
}
*/
.tabcontent {
opacity: 0;
margin: 1vw 0;
padding: 0.4vw 0.8vw;
background-color: rgba(128, 128, 128, 0.5);
width: 100%;
height: 63vh;
border-radius: 0.8vw;
}
.tabcontent_select_table {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
width: 100%;
margin-bottom: 3vh;
align-items: center;
}
.tabcontent_select_tablecell_row {
text-align: center;
}
.rows2 {
width: 50%; /* peste 50% = una sub alta */
}
.rows4 {
width: 25%;
}
.tabcontent_title {
text-align: center;
border-bottom: 0.05vw dotted rgba(255, 255, 255, 0.5);
margin-bottom: 3vh;
}
.tabcontent_title>p, p.tabcontent_select_tablecell_row {
font-family: Arial;
font-weight: 900;
font-size: 1.5vw;
color: rgb(245, 255, 250);
text-shadow: -0.05vw 0 black, 0 0.05vw black, 0.05vw 0 black, 0 -0.05vw black;
}
.topright {
float: right;
cursor: pointer;
font-size: 1.5vw;
color: red;
font-weight: 900;
border: 0.1vw solid red;
padding: 0 0.4vw;
border-radius: 0.2vw;
}
.tabcontent_select_table > p {
color: white;
font-size: 1.5vw;
text-shadow: -0.05vw 0 black, 0 0.05vw black, 0.05vw 0 black, 0 -0.05vw black;
}
/*
div p {
font-family: 'Gabriola';
font-size: 22px;
color: rgb(0,0,92)
} */
/*
.search {
background-image: url('../Images/search.jpg');
position: relative;
background-size:15px 15px;
padding-left: 25px;
background-repeat: no-repeat;
background-position: 5px 2px;
}
*/
.search_button {
width: 18%;
padding: 0.7vw;
background: rgb(33, 150, 243);
color: white;
font-size: 1.1vw;
border: 0.05vw solid grey;
margin: 8vh 42% 0 42%;
}
.errorbox {
color: red;
font-size: 1.5vw;
}
.tablinks.adaugaAnunt:not(.active) {
animation: blinkingText 1s infinite;
}
.tablinks.active.adaugaAnunt {
animation: noBlinkingText 1s infinite !important;
background-color: rgb(226, 88, 34);
}
.tablinks.adaugaAnunt>a {
text-decoration: none;
color: black;
}
@keyframes blinkingText {
0% {
background-color: inherit
}
50% {
background-color: rgb(226, 88, 34)
}
100% {
background-color: inherit
}
}
@keyframes noBlinkingText {
0% {
background-color: rgb(226, 88, 34)
}
50% {
background-color: rgb(226, 88, 34)
}
100% {
background-color: rgb(226, 88, 34)
}
}
/*
.custom-select {
position: relative;
font-family: Arial;
border: 1px solid blue;
width: 227px;
}
.custom-select select {
display: none;
hide original SELECT element:
}
.select-selected {
background-color: DodgerBlue;
}
style the arrow inside the select element:
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
point the arrow upwards when the select box is open (active):
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}
style the items (options), including the selected item:
.select-items div,
.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid blue;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
user-select: none;
}
style items (options):
.select-items {
position: absolute;
background-color: rgb(50, 50, 130);
top: 100%;
left: 0;
right: 0;
z-index: 99;
width: 225px;
height: 200px;
overflow-x: hidden;
overflow-y: scroll;
}
.select-items div {
border-left: 1px solid orangered;
border-right: 1px solid orangered;
border-bottom: 1px solid orangered;
width: 225px;
}
hide the items when the select box is closed:
.select-hide {
display: none;
}
.select-items div:hover,
.same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
} */<!DOCTYPE html>
<html>
<head lang="en">
<!--|***********************************************************************************************************************************************************************|-->
<title>Nume Companie Imobiliare</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--|***********************************************************************************************************************************************************************|-->
<link rel="stylesheet" href="CSS/style.css" />
<link rel="icon" type="image/x-icon" href="#" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!--|***********************************************************************************************************************************************************************|-->
</head>
<body>
<div id="main">
<!--|***********************************************************************************************************************************************************************|-->
<ul id="navul">
<li class="navfirst"><a class="navli, active" href="../Site-ul de la zero/index.html">Home</a></li>
<li><a class="navli" href="../Site-ul de la zero/indexnews.html">News</a></li>
<li><a class="navli" href="https://www.google.ro" target="blank">Google</a></li>
<li><a class="navli" href="https://www.facebook.com/trendytravelromania/?ref=br_rs" target="blank">Facebook</a></li>
<li><a class="navli" href="../Site-ul de la zero/indexcontact.html">Contact</a></li>
<li><a class="navli" href="../Site-ul de la zero/indexabout.html">About</a></li>
<li class="navlast"><a class="navli" href="../Site-ul de la zero/indexabout.html">Autentificare</a></li>
</ul>
<!--|***********************************************************************************************************************************************************************|-->
<div id="header">
<div class="title">Imobiliare Particulari .ro</div>
<div class="tab">
<button class="tablinks" onclick="closeAllContent(); openContent(event, 'VanzariApartamente')">Vânzări<br />Apartamente</button>
<button class="tablinks" onclick="closeAllContent(); openContent(event, 'InchirieriApartamente')">Închirieri<br />Apartamente</button>
<button class="tablinks" onclick="closeAllContent(); openContent(event, 'VanzariVile')">Vânzări<br />Vile</button>
<button class="tablinks" onclick="closeAllContent(); openContent(event, 'InchirieriVile')">Închirieri<br />Vile</button>
<button class="tablinks" onclick="closeAllContent(); openContent(event, 'VanzariTerenuri')">Vânzări<br />Terenuri</button>
<button class="tablinks" onclick="closeAllContent(); openContent(event, 'InchirieriSpatiiComerciale')">Închirieri<br />Spații Comerciale</button>
<button class="tablinks adaugaAnunt"><a href="#">Adaugă Anunț<br />GRATUIT</a></button>
</div>
<div id="VanzariApartamente" class="tabcontent">
<span onclick="closeAllContent();" class="topright">×</span>
<div class="tabcontent_title">
<p>Vanzări Apartamente</p>
</div>
<form class="search_form" action="index_action_search_page.html" method="GET" target="_blank">
<div class="tabcontent_select_table">
<p class="tabcontent_select_tablecell_row rows4">Localitatea</p>
<select name="localitate" class="tabcontent_select_tablecell_row rows4">
<option value="0">Alege localitatea:</option>
<option value="1">București</option>
</select>
<p class="tabcontent_select_tablecell_row rows4">Numărul de camere</p>
<select name="nrcamere" class="tabcontent_select_tablecell_row rows4">
<option value="0">Alege numărul de camere:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4+</option>
</select>
</div>
<div class="tabcontent_select_table">
<p class="tabcontent_select_tablecell_row rows4">Prețul</p>
<div class="tabcontent_select_tablecell_row rows4">
<select name="pretminim" class="tabcontent_select_tablecell_row rows2">
<option>De la:</option>
<option value="30000">Indiferent</option>
<option value="30000">30 mii €</option>
<option value="40000">40 mii €</option>
<option value="50000">50 mii €</option>
<option value="60000">60 mii €</option>
<option value="70000">70 mii €</option>
<option value="80000">80 mii €</option>
<option value="90000">90 mii €</option>
<option value="100000">100 mii €</option>
<option value="110000">110 mii €</option>
<option value="120000">120 mii €</option>
<option value="130000">130 mii €</option>
<option value="140000">140 mii €</option>
<option value="150000">150 mii €</option>
</select>
<select name="pretmaxim" class="tabcontent_select_tablecell_row rows2">
<option>Până la:</option>
<option value="150000">Indiferent</option>
<option value="10000">10 mii €</option>
<option value="20000">20 mii €</option>
<option value="30000">30 mii €</option>
<option value="40000">40 mii €</option>
<option value="50000">50 mii €</option>
<option value="60000">60 mii €</option>
<option value="70000">70 mii €</option>
<option value="80000">80 mii €</option>
<option value="90000">90 mii €</option>
<option value="100000">100 mii €</option>
<option value="110000">110 mii €</option>
<option value="120000">120 mii €</option>
<option value="130000">130 mii €</option>
<option value="140000">140 mii €</option>
<option value="150000">150 mii €</option>
</select>
</div>
<p class="tabcontent_select_tablecell_row rows4">Numărul de m<sup>2</sup></p>
<div class="tabcontent_select_tablecell_row rows4">
<select name="nrmpminim" class="tabcontent_select_tablecell_row rows2">
<option value="0">De la:</option>
<option value="1">y</option>
<option value="1">y</option>
</select>
<select name="nrmpmaxim" class="tabcontent_select_tablecell_row rows2">
<option value="0">Până la:</option>
<option value="1">y</option>
<option value="1">y</option>
</select>
</div>
</div>
<button class="search_button" type="submit">Caută</button>
</form>
<div class="errorbox">Errors</div>
</div>
</div>
<!-- <div id="Garsoniere" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">×</span>
<div>
<h3>Cauta garsoniere:</h3>
</div>
<select class="select">
<option value="0">Specifica locatia:</option>
<option value="1">Bucuresti</option>
<option value="2">Alba Iulia</option>
<option value="3">Alexandria</option>
<option value="4">Arad</option>
<option value="5">Bacau</option>
<option value="6">Baia Mare</option>
<option value="7">Bistrita</option>
<option value="8">Botosani</option>
<option value="9">Braila</option>
<option value="10">Brasov</option>
<option value="11">Buzau</option>
<option value="12">Calarasi</option>
<option value="13">Cluj-Napoca</option>
<option value="14">Craiova</option>
<option value="15">Deva</option>
<option value="16">Drobeta Turnu-Severin</option>
<option value="17">Focsani</option>
<option value="18">Galati</option>
<option value="19">Giurgiu</option>
<option value="20">Iasi</option>
<option value="21">Miercurea Ciuc</option>
<option value="22">Oradea</option>
<option value="23">Piatra Neamt</option>
<option value="24">Pitesti</option>
<option value="25">Ploiesti</option>
<option value="26">Ramnicu Valcea</option>
<option value="27">Resita</option>
<option value="28">Satu Mare</option>
<option value="29">Sf. Gheorghe</option>
<option value="30">Sibiu</option>
<option value="31">Slatina</option>
<option value="32">Slobozia</option>
<option value="33">Suceava</option>
<option value="34">Targoviste</option>
<option value="35">Targu Jiu</option>
<option value="36">Targu Mures</option>
<option value="37">Focsani</option>
<option value="38">Timisoara</option>
<option value="39">Tulcea</option>
<option value="40">Vaslui</option>
<option value="41">Zalau</option>
</select>
<select class="select">
<option value="0">Specifica num:</option>
<option value="1">Bucuresti</option>
<option value="2">Alba Iulia</option>
<option value="3">Alexandria</option>
<option value="4">Arad</option>
<option value="5">Bacau</option>
<option value="6">Baia Mare</option>
<option value="7">Bistrita</option>
<option value="8">Botosani</option>
<option value="9">Braila</option>
<option value="10">Brasov</option>
<option value="11">Buzau</option>
<option value="12">Calarasi</option>
<option value="13">Cluj-Napoca</option>
<option value="14">Craiova</option>
<option value="15">Deva</option>
<option value="16">Drobeta Turnu-Severin</option>
<option value="17">Focsani</option>
<option value="18">Galati</option>
<option value="19">Giurgiu</option>
<option value="20">Iasi</option>
<option value="21">Miercurea Ciuc</option>
<option value="22">Oradea</option>
<option value="23">Piatra Neamt</option>
<option value="24">Pitesti</option>
<option value="25">Ploiesti</option>
<option value="26">Ramnicu Valcea</option>
<option value="27">Resita</option>
<option value="28">Satu Mare</option>
<option value="29">Sf. Gheorghe</option>
<option value="30">Sibiu</option>
<option value="31">Slatina</option>
<option value="32">Slobozia</option>
<option value="33">Suceava</option>
<option value="34">Targoviste</option>
<option value="35">Targu Jiu</option>
<option value="36">Targu Mures</option>
<option value="37">Focsani</option>
<option value="38">Timisoara</option>
<option value="39">Tulcea</option>
<option value="40">Vaslui</option>
<option value="41">Zalau</option>
</select>
<div class="custom-select">
<select>
<option value="0">Specifica locatia:</option>
<option value="1">Bucuresti</option>
<option value="2">Alba Iulia</option>
<option value="3">Alexandria</option>
<option value="4">Arad</option>
<option value="5">Bacau</option>
<option value="6">Baia Mare</option>
<option value="7">Bistrita</option>
<option value="8">Botosani</option>
<option value="9">Braila</option>
<option value="10">Brasov</option>
<option value="11">Buzau</option>
<option value="12">Calarasi</option>
<option value="13">Cluj-Napoca</option>
<option value="14">Craiova</option>
<option value="15">Deva</option>
<option value="16">Drobeta Turnu-Severin</option>
<option value="17">Focsani</option>
<option value="18">Galati</option>
<option value="19">Giurgiu</option>
<option value="20">Iasi</option>
<option value="21">Miercurea Ciuc</option>
<option value="22">Oradea</option>
<option value="23">Piatra Neamt</option>
<option value="24">Pitesti</option>
<option value="25">Ploiesti</option>
<option value="26">Ramnicu Valcea</option>
<option value="27">Resita</option>
<option value="28">Satu Mare</option>
<option value="29">Sf. Gheorghe</option>
<option value="30">Sibiu</option>
<option value="31">Slatina</option>
<option value="32">Slobozia</option>
<option value="33">Suceava</option>
<option value="34">Targoviste</option>
<option value="35">Targu Jiu</option>
<option value="36">Targu Mures</option>
<option value="37">Focsani</option>
<option value="38">Timisoara</option>
<option value="39">Tulcea</option>
<option value="40">Vaslui</option>
<option value="41">Zalau</option>
</select>
</div>
</div>
<div id="Apartamente" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">×</span>
<h3>Paris</h3>
<p> oferta speciala: 02 iulie Hotelul x 220 euro </p>
</div>
<div id="Vile" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">×</span>
<h3>Bucharest</h3>
<p>Bucharest is the capital of Romania.</p>
</div>
<div id="Birouri" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">×</span>
<h3>Berlin</h3>
<p> Berlin, capitala germană, este renumit pentru o varietate excepțională de atracții, pentru o scenă culturală înfloritoare și pentru un mod de viață atât de rapid și relaxat. Contrastele dintre clădirile istorice și arhitectura contemporană, între tradițional și modern, sunt ceea ce deosebesc acest oraș față de multe altele. Atracțiile Berlinului - de la Poarta Brandenburg până la Cancelaria Federală - spun povestea unei întregi națiuni. Capitala Germaniei găzduiește toate clădirile importante ale guvernului, mai ales Reichstagul istoric, sediul parlamentului german. </p>
</div>
<div id="SpatiiComerciale" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">×</span>
<h3>Roma</h3>
<p>Rome is the capital of Italy.</p>
</div>
<div id="Terenuri" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">×</span>
<h3>Roma</h3>
<p>Rome is the capital of Italy.</p>
</div> -->
<!--|***********************************************************************************************************************************************************************|-->
</div>
<!--|***********************************************************************************************************************************************************************|-->
<script src="JS/citytabs.js"></script>
<script src="JS/search.js"></script>
<script src="JS/selectScript.js"></script>
<script src="selectTagHandle.js"></script>
<!--|***********************************************************************************************************************************************************************|-->
</body>
</html>解决方案
推荐阅读
- python - 当我输入错误的答案时，它会做正确的事情（我是初学者 python）
- reactjs - 在反应中访问复选框的简单方法。我有超过 20 个复选框
- angular - Leaflet + Ionic5 / Angular - 映射不良渲染 -
- ios - AVFragmentedAssetMinder 不能在 iPhone 设备上运行，但可以在模拟器上运行
- java - XMLEventWriter 抛出 javax.xml.stream.XMLStreamException: No open start element，当尝试写入结束元素时，即使打开
- xslt - 选择表亲 - 即前面和前面的兄弟姐妹的问题
- ruby-on-rails - 无法提交由 Rails Turbo Frame 响应绘制的表单
- tailwind-css - 如何在 Tailwind css 中对齐文本
- firefox - Blazor Web 程序集：可下载字体：glyf：字形 1258 中的复合点数超过 maxp maxCompositePoints
- javascript - 在 JavaScript 中更改背景图像不起作用