当屏幕分辨率低于600px时无法隐藏<a>标签

-1

我想要实现的是当我将浏览器的分辨率更改为600px以下时，除家外的标签将消失。并且只在点击三明治按钮时才会再次出现，但（管理控制）和（退出）不会消失。我认为是因为我让两个“显示”属性使用JavaScript“阻止”。（.topnav a：not（：first）{display：none;}。我花了几个小时修复它并寻找解决方案，但没有运气，所以任何帮助和建议都非常感谢。当屏幕分辨率低于600px时无法隐藏<a>标签

这是它看起来像

这里是PHP

<?php 
    error_reporting(E_ALL & ~E_NOTICE); 
    error_reporting(E_ERROR | E_PARSE); 
    session_start(); 
?> 

<!DOCTYPE html> 
<html> 
<head> 
<title>Home</title> 
<link rel="stylesheet" type="text/css" href="styles.css"> 
</head> 
<body> 

<div class="topnav" id="myTopnav"> 
    <a href="index.php">Home</a> 
    <a href="speaker.php">Speakers</a> 
    <a href="about.php">About</a> 
    <a href="contact.php">Contact</a> 
    <a href="reservation.php">Reservation</a> 
    <a href="signOut.php" id="signOut" style="float:right">Sign Out</a> 
    <a href="myAccount.php" id="user" style="float:right; text-transform:capitalize;"><?php echo $_SESSION['firstname']; ?></a> 
    <a href="signUp.php" id="signUp" style="float:right">Sign Up</a> 
    <a href="signIn.php" id="signIn" style="float:right">Sign In</a> 
    <a href="adminControl.php" id="adminControl" style="float:right; width:110px;">Admin control</a> 
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> 
</div> 

<div class="slideshow-container"> 

<div class="mySlides fade"> 
    <img id="img1" src="img/homepage-image1.jpg"> 
    <div class="text"></div> 
</div> 

<div class="mySlides fade"> 
    <img id="img2" src="img/homepage-image2.jpg"> 
    <div class="text"></div> 
</div> 

<div class="mySlides fade"> 
    <img id="img3" src="img/homepage-image3.jpg"> 
    <div class="text"></div> 
</div> 

<div id="dots"> 
    <span class="dot"></span> 
    <span class="dot"></span> 
    <span class="dot"></span> 
</div> 
</div> 
<div id="index-welcome"><p>Welcome</p></div> 

<div id="footer" >Copyright 2017</div> 

<script> 
var slideIndex = 0; 
showSlides(); 

function showSlides() { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("dot"); 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    slideIndex++; 
    if (slideIndex> slides.length) {slideIndex = 1}  
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active"; 
    setTimeout(showSlides, 4000); 
} 
</script> 

<script> 
function ifAdmin() 
{ 
     document.getElementById("signIn").style.display = "none"; 
     document.getElementById("signUp").style.display = "none"; 
     document.getElementById("signOut").style.display = "block"; 
     document.getElementById("adminControl").style.display = "block"; 
} 
</script> 

<script> 
function ifNotAdmin() 
{ 
    document.getElementById("signIn").style.display = "none"; 
    document.getElementById("signUp").style.display = "none"; 
    document.getElementById("signOut").style.display = "block"; 
    document.getElementById("adminControl").style.display = "none"; 
} 
</script> 

<script> 
function ifNotLogin() 
{ 
    document.getElementById("user").style.display = "none"; 
    document.getElementById("signOut").style.display = "none"; 
    document.getElementById("adminControl").style.display = "none"; 
} 
</script> 

<script> 
function myFunction() 
{ 
    var x = document.getElementById("myTopnav"); 
    if (x.className === "topnav") 
    { 
     x.className += " responsive"; 
    } else 
    { 
     x.className = "topnav"; 
    } 
} 
</script> 

<?php 

    if (isset($_SESSION['signedIn']) && $_SESSION['signedIn'] == true) 
     //if login 
     { 
      if($_SESSION['type'] == 1) 
      { 
       echo "<script type='text/javascript'>ifAdmin();</script>"; 
      } 
      elseif($_SESSION['type'] == 0) 
      { 
       echo "<script type='text/javascript'>ifNotAdmin();</script>"; 
      } 
     } 
     //if not login 
     else 
     { 
      echo "<script type='text/javascript'>ifNotLogin();</script>"; 
     } 
?> 

</body> 
</html>

CSS

@media screen and (max-width: 600px) 
{ 

    /*navbar*/ 
    .topnav 
    { 
     height:auto; 
     width:100%; 
     overflow: hidden; 
     background-color: #4682B4; 
     position:fixed; 
     top:0; 
     z-index: 10; 

    } 

    .topnav a:not(:first-child) 
    { 
     display: none; 
    } 

    .topnav a.icon 
    { 
     float: right; 
     display: block; 
     height:15px; 
    } 
    .topnav a 
    { 
     height:15px; 
     width:auto; 
     float: left; 
     display: block; 
     color: #f2f2f2; 
     text-align: center; 
     padding: 16px 16px; 
     text-decoration: none; 
     font-size: 15px; 
    } 
    .topnav a:hover 
    { 
     background-color: lightblue; 
     color: black; 
     height:12px; 

    } 

    /*footer*/ 

    #footer 
    { 
     background-color: #4682B4; 
     color: #f2f2f2; 
     text-align: center; 
     padding: 15px 25px; 
     font-size: 12px; 
     font-weight:bold; 
     position: absolute; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     text-align: center; 
    } 
} 

@media screen and (max-width: 600px) 
{  

    .topnav.responsive 
    { 
     position: relative; 
    } 
    .topnav.responsive .icon 
    { 
     position: absolute; 
     right: 0; 
     top: 0; 
    } 

    .topnav.responsive a 
    { 
     float: none; 
     display: block; 
     text-align: left; 
    } 
}

请帮助我认为即时通讯附近它。我添加显示：无！重要;在CSS中，而不是“display：none”，就像Chris Spil所说的那样，但是这种情况发生了。除了“家庭标签”之外，“扬声器标签”也是顶部。

这是我改变。

@media screen and (max-width: 600px) 
{ 

    /*navbar*/ 
    .topnav 
    { 
     height:auto; 
     width:100%; 
     overflow: hidden; 
     background-color: #4682B4; 
     position:fixed; 
     top:0; 
     z-index: 10; 

    } 

    .topnav a#speaker 
    { 
     display:none; 
    } 

    .topnav a#about 
    { 
     display:none; 
    } 

    .topnav a#contact 
    { 
     display:none; 
    } 

    .topnav a#reservation 
    { 
     display:none; 
    } 
    .topnav a#user 
    { 
     display:none!important; 
    } 

    .topnav a#adminControl 
    { 
     display:none!important; 
    } 
    .topnav a#signOut 
    { 
     display:none!important; 
    } 


    .topnav a.icon 
    { 
     display:block; 
     float: right; 
     display: block; 
     height:15px; 
    } 
    .topnav a 
    { 
     height:15px; 
     width:auto; 
     float: left; 
     color: #f2f2f2; 
     text-align: center; 
     padding: 16px 16px; 
     text-decoration: none; 
     font-size: 15px; 
    } 
    .topnav a:hover 
    { 
     background-color: lightblue; 
     color: black; 
     height:12px; 

    } 

@media screen and (max-width: 600px) 
{  

    .topnav.responsive 
    { 
     position: relative; 
    } 
    .topnav.responsive .icon 
    { 
     position: absolute; 
     right: 0; 
     top: 0; 
    } 

    .topnav.responsive a#speaker 
    { 
     float: none; 
     display:block!important; 
     text-align: left; 
    } 
    .topnav.responsive a#about 
    { 
     float: none; 
     display:block!important; 
     text-align: left; 
    } 
    .topnav.responsive a#contact 
    { 
     float: none; 
     display:block!important; 
     text-align: left; 
    } 
    .topnav.responsive a#reservation 
    { 
     float: none; 
     display:block!important; 
     text-align: left; 
    } 
    .topnav.responsive a#user 
    { 
     float: none; 
     display:block!important; 
     text-align: left; 
    } 
    .topnav.responsive a#adminControl 
    { 
     float: none; 
     display:block!important; 
     text-align: left; 
    } 
    .topnav.responsive a#signOut 
    { 
     float: none; 
     display:block!important; 
     text-align: left; 
    } 


}

来源

2017-07-31 Red

你为什么不在这里使用引导程序。它已经建立了这个功能？ –

因为我不熟悉它。和我最后一次使用它，它搞乱了我的设计。也许我没有完全了解它的使用和功能。 – Red

你的css的其余部分在哪里？ – Oluwaseye

你可以试试display:none!important;你的css代码，让我知道吗？你有这个地方住吗？

来源

2017-07-31 19:47:28

好的，谢谢，我会尝试。某处住？喜欢在线？不，我不。 – Red

看着你的HTML，你不要在你的<head>标签中设置视口。您是否包含此元标记： <meta name="viewport" content="width=device-width, initial-scale=1.0">。

该标签将为您的浏览器提供如何控制页面的尺寸和缩放比例的说明。更多的可以阅读关于它here。

来源

2017-07-31 19:50:22

好吧，我会添加它。谢谢 – Red

您可以使用onclick在javascript中设置visibility和opacity。

为了向您展示，我创建了这个jsfiddle作为示例。

编辑：更新了jsfiddle链接。

来源

2017-07-31 20:01:02 flawy

当屏幕分辨率低于600px时无法隐藏<a>标签

回答

相关问题