根据屏幕分辨率隐藏和显示div元素，哪里出了问题

我试图根据媒体设备为我的描述显示设置一个稍微不同的行为，但遇到了问题。在手机上，我希望描述显示在菜单项之间，在桌面上显示在底部。在这个代码排列中，它在移动设备上工作，但拒绝显示桌面上的信息。我确信我做了一些愚蠢的事情，但不知道是什么。我尝试了很多能让其中一种或另一种奏效的方法，但从来没有两者都奏效。我是一个新手，有点失落，我很感激任何建议。非常感谢你的提示。

<!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>

使用id查找元素的问题。document.getElementById((只工作一次，这意味着它将只返回页面中具有您找到的id的第一个元素。因此，在代码中，dekstop和mobile都使用相同的id。例如："viz"、"assets"等

我给你的建议是，使用class或使id在mobile和dekstop之间唯一。

尝试更改CSS媒体查询。


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

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

相关内容

最新更新

热门标签：