无法隐藏<a> tag when the screen resolution is below 600px
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()">☰</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;
}
}
3 个答案:
答案 0 :(得分：1)
您可以在css代码上试用display:none!important;告诉我吗？你有这个住在哪里吗？
答案 1 :(得分：1)
答案 2 :(得分：0)
查看您的HTML，不要在<head>标记中设置视口。您是否包含此元标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0">。
此标记会向您的浏览器提供有关如何控制页面尺寸和缩放的说明。关于它的更多信息可以阅读here。
相关问题
- vs <a>: when to use one over the other?</a>
- how to show a error when the textbox is empty
- Can the compiler tell when a `break` is never reached
- Can a Complication access Healthkit when the watch screen is off?
- Android Find when the voice icon is clicked in a SearchView
- I want to open a new html when the screen size is below "width 700" automatically
- Using OPENJSON when the source is not formatted as a set
- 无法隐藏<a> tag when the screen resolution is below 600px
- Below is a rendering of the page up to the first error. (Magento 2)
- OpenGL shapes look darker when camera is below them
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？