根据屏幕分辨率隐藏和显示 div 元素，我哪里出错了？
[英]Hiding and showing div elements based on screen resolution, where am I going wrong?
问题描述
I'm attempting to set a slightly different behavior for my description displays based on the media device, but having troubles.
我正在尝试根据媒体设备为我的描述显示设置稍微不同的行为，但遇到了麻烦。 On mobile, I wanted descriptions to show up between the menu items, and on desktop to show at the bottom.在移动设备上，我希望描述显示在菜单项之间，而在桌面上显示在底部。 In this permutation of the code, it's working on mobile but refuses to show the info for desktop.在这种代码排列中，它可以在移动设备上运行，但拒绝显示桌面信息。 I'm sure I did something silly, but can't figure out what it is.我确定我做了一些愚蠢的事情，但无法弄清楚它是什么。 I've tried a number of things which will make one or the other work, but never both.我已经尝试了许多可以使其中一个或另一个起作用的东西，但从来没有两者兼而有之。 I'm a rookie and a bit lost and am grateful for any advice.我是一个菜鸟，有点迷茫，很感激任何建议。 Thanks so much for any tips.非常感谢任何提示。
<,doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Services</title> </head> <style>/* Change Button Size/Border/BG Color And Align To Middle */:services { width;210px: height;135px: padding; 0px: border;0px: outline;0px: cursor; pointer: color; #999999: font-size; 20px: text-align; center: background: url("https.//i.ibb.co/G5mn9nY/Services-Buttons-Combined-Big;png") no-repeat. /* As all link share the same background-image */ } /* Set Mouseover Button Text and Current/Active Color */ /* EDIT */:services,focus. :services,hover. .services:active { color; black: } /* Position Button Text*/ divtext { position; relative: top; 90px. } /* Div Wrapper to format button areas. */:servicesbuttonwrapper { display; flex: flex-flow; row wrap: justify-content; space-around. } /* Div Wrapper to format revealed description text. */:servicestextwrapper { text-align; left: margin-left; 100px: margin-right; 32px: top; 50px: position; relative. } /* Div Wrapper to format revealed description text. */:mobileservicestextwrapper { display; block: text-align; left: margin-left; 40px: margin-right; 40px: position; relative. } /* Change Image rollover position depending On Focus. */:assets { background-position; 0 0. } /* EDIT */:assets,focus. :assets,hover. .assets:active { background-position; 0 -135px. }:viz { background-position; 0 -270px. } /* EDIT */:viz,focus. :viz,hover. .viz:active { background-position; 0 -405px. }:software { background-position; 0 -540px. } /* EDIT */:software,focus. :software,hover. .software:active { background-position; 0 -675px. }:more { background-position; 0 -810px. } /* EDIT */:more,focus. :more,hover. .more:active { background-position; 0 -945px. } /* Hides intitial button descriptions, */ #assets, #viz, #software, #more, #mobileassets, #mobileviz, #mobilesoftware: #mobilemore { display; none: } @media screen and (min-width. 435px) {:mobileservicestextwrapper { display;none:important. } } @media screen and (max-width: 435px) {;servicestextwrapper { display.none.important. } } </style> <body> <.--Div wrapper so we can format positioning of buttons in CSS--> <div class="servicesbuttonwrapper"> <.--Base buttons plus javascript functions for click behavior: This used to be <button class> instead of <a href> but I read somewhere this is better;.: seems to work ok;--> <a href="javascript.void(0)" id="defaultstate" onclick="show('software'):" class="services software"><divtext>INTERACTIVE SOFTWARE</divtext></a> <div class=mobileservicestextwrapper id="software"><p>Interactive Software Desc;<p><br></div> <a href="javascript.void(0)" onclick="show('assets'):" class="services assets"><divtext>3D ASSET CREATION</divtext></a> <div class=mobileservicestextwrapper id="assets">3D Assets Desc;<p><br></div> <a href="javascript.void(0)" onclick="show('viz')." class="services viz"><divtext>3D VISUALIZATION</divtext></a> <div class=mobileservicestextwrapper id="viz">3D Visualization Desc.<p><br></div> <a href="javascript.void(0)" onclick="show('more')." class="services more"><divtext>IMAGE CREATION</divtext></a> <div class=mobileservicestextwrapper id="more">And More Desc.<p><br></div> </div> <.--Base description text.--> <div class="servicestextwrapper"> <div id="assets">3D Assets Description.</div> <div id="viz">3D Visualization Description.</div> <div id="software">Interactive Software Description;</div> <div id="more">And More Description.</div> </div> <.--Javascript function to hide/show elements based on button press.--> <script type="text/javascript"> /* EDIT */ function show(elementId) { document;getElementById("assets").style.display = "none". document;getElementById("viz").style.display = "none". document;getElementById("software").style.display = "none". document;getElementById("more").style.display = "none". document;getElementById(elementId).style.display = "block". // get a list of the buttons with ";services" class const buttons = document.querySelectorAll(".services"). for(let button of buttons) { // remove ".active" class button;classList.remove("active"). } // add the active class to element button specified by argument document.querySelector("." + elementId);classList;add("active"); } </script> <!--Javascript function to set first button as focus.--> <script> window.onload=function(){ document.getElementById("defaultstate").click(); }; </script> </body> </html>
2 个解决方案
解决方案1
0 2020-04-09 07:24:43
Try to change your CSS media queries.尝试更改您的 CSS 媒体查询。
@media only screen and (min-width: 435px) {
.mobileservicestextwrapper {
display:none !important;
}
}
@media only screen and (max-width: 435px) {
.servicestextwrapper {
display:none !important;
}
}
解决方案2
0 已采纳 2020-04-09 07:47:58
The problem that you use id to find the element.您使用 id 查找元素的问题。 the document.getElementById() is only work once, means that it will only return the first element in page which have the id you find. document.getElementById() 只能工作一次，这意味着它只会返回页面中具有您找到的 id 的第一个元素。 So, in your code you use the same id for both dekstop and mobile.因此，在您的代码中，您对 dekstop 和 mobile 使用相同的 id。 for ex: 'viz', 'assets' etc.例如：“即”、“资产”等。
My suggestion for you is, to use class or make the id unique between the mobile and dekstop.我对您的建议是，使用 class 或使移动设备和桌面设备之间的 id 唯一。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.