Question

What i want to achieve is when i change the resolution of my browser to below 600px the tags except home will disappear. and only appear again when the sandwich button is clicked but the (admin control) and (sign out) is not disappearing. I think is because of i make the "display" attribute of both to "block" using javascript. that cause a conflict with the css code (.topnav a:not(:first){ display:none;}. i spend hours in fixing it and searching for a solution but with no luck. so any help and suggestion is greatly appreciated.

this is what it look like

这是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;
    }
}

请帮助我认为即将到来。我添加display：none！important;在css而不是＆＃34;显示：无＆＃34;只有，像克里斯斯皮尔说，但这发生了。＆＃34;扬声器标签＆＃34;除了＆＃34; home tag＆＃34;之外，它还是排在首位。

这就是我改变的。

@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;
    }


}

Answer 1

您可以在css代码上试用display:none!important;告诉我吗？你有这个住在哪里吗？

Answer 2

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

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

编辑：更新了jsfiddle链接。

Answer 3

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

此标记会向您的浏览器提供有关如何控制页面尺寸和缩放的说明。关于它的更多信息可以阅读here。

无法隐藏<a> tag when the screen resolution is below 600px

3 个答案: