根据屏幕分辨率隐藏和显示 div 元素，我哪里出错了？
[英]Hiding and showing div elements based on screen resolution, where am I going wrong?
问题描述
我正在尝试根据媒体设备为我的描述显示设置稍微不同的行为，但遇到了麻烦。 在移动设备上，我希望描述显示在菜单项之间，而在桌面上显示在底部。 在这种代码排列中，它可以在移动设备上运行，但拒绝显示桌面信息。 我确定我做了一些愚蠢的事情，但无法弄清楚它是什么。 我已经尝试了许多可以使其中一个或另一个起作用的东西，但从来没有两者兼而有之。 我是一个菜鸟，有点迷茫，很感激任何建议。 非常感谢任何提示。
<,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
尝试更改您的 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
您使用 id 查找元素的问题。 document.getElementById() 只能工作一次，这意味着它只会返回页面中具有您找到的 id 的第一个元素。 因此，在您的代码中，您对 dekstop 和 mobile 使用相同的 id。 例如：“即”、“资产”等。
我对您的建议是，使用 class 或使移动设备和桌面设备之间的 id 唯一。
我要改变颜色 <div> 在mouseOver函数上的javascript中。我在哪里出错？
[英]I'm to change color of <div> in javascript on mouseOver function.Where am i going wrong?
我在这个 php 脚本中哪里出错了，以根据无线电输入操作字符串
[英]Where am i Going wrong in this php script to manipulate a string based on radio input
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.