簡體   English   中英

根據屏幕分辨率隱藏和顯示 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>

嘗試更改您的 CSS 媒體查詢。


@media only screen and (min-width: 435px) {
      .mobileservicestextwrapper  {
            display:none !important;
   }
 }


@media only screen and (max-width: 435px) {
      .servicestextwrapper {
            display:none !important;
   }
 }

您使用 id 查找元素的問題。 document.getElementById() 只能工作一次,這意味着它只會返回頁面中具有您找到的 id 的第一個元素。 因此,在您的代碼中,您對 dekstop 和 mobile 使用相同的 id。 例如:“即”、“資產”等。

我對您的建議是,使用 class 或使移動設備和桌面設備之間的 id 唯一。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM