个人中心
gpt4 book ai didi

javascript - 当屏幕分辨率低于 600px 时无法隐藏 标签

转载 作者：行者123 更新时间：2023-11-28 16:25:34 25 4
gpt4 key购买 nike

我想要实现的是当我将浏览器的分辨率更改为低于 600px 时，除主页之外的标签将消失。并且仅在单击三明治按钮但(管理控制)和(注销)没有消失时再次出现。我认为是因为我使用 javascript 将两者的“显示”属性设置为“阻止”。这会导致与 css 代码 (.topnav a:not(:first){ display:none;} 发生冲突。我花了几个小时来修复它并寻找解决方案但没有运气。所以非常感谢任何帮助和建议。

这是它的样子

enter image description here enter image description here

这是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 说的那样，但这种情况发生了。除了“home 标签”，“speaker 标签”位于顶部。

enter image description here

这就是我要改变的。 

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


}

最佳答案

您可以在您的 CSS 代码上尝试 display:none!important; 并告诉我吗？你有现场直播吗？

关于javascript - 当屏幕分辨率低于 600px 时无法隐藏 <a> 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45423961/

25 4 0
文章推荐： jquery - 无法使用 Selenium 在页面上找到 p 标记元素
文章推荐： html - 如何在css中添加两个背景图片
文章推荐： css - Safari 中奇怪的边界半径行为
文章推荐： javascript变量中的php数组用于jquery自动完成
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com