我遇到过这样的情况，当CSS媒体查询为真时，我想更改HTML中无序列表中的HREF。具体来说，我想在下面的页面中将HREF从calendar.html更改为calendar2.html。这可能吗？以下是代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/cliffsteele.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11;IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />

<style>
@media only screen 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)

    {
		
	.header {
		display:none;
		}
	
	.maincontent{ 
		text-align:left;
		}
	.content {
		width: 100%;
	}
	.footer {
		display:none;
			}
	.sidebar1 {
		float:none;
		display:none; 
	}
	.maincontent div {
		 text-align:left;
	}
	.calendar {
		width=550%;
	}
	}
	
</style>	


<title>Untitled Document</title>


<!-- InstanceBeginEditable name="doctitle" -->
<title>Cliff's Show Schedule</title>
<!-- InstanceEndEditable -->

<style type="text/css"> 
<!--
-->
</style> 

<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } 
ul.nav a { zoom: 1; } 
</style>
<![endif]-->

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />  

<link href="cliff.css" rel="stylesheet" type="text/css" /> 
 
<!-- InstanceBeginEditable name="head" -->

<!-- InstanceEndEditable -->

<script type="text/javascript" src="p7pm3/p7PM3scripts.js"></script>
<link href="p7pm3/p7PM3-01.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>       
                             
<div class="container">

  <div class="header"><img src="Pictures/logo.gif" alt="Logo" name="Insert_logo" width="81" height="63" id="Insert_logo" style="background: #8090AB; display:block;" /> 
     
<!-- end .header --></div>


  

  <div class="content">
    <div id="p7PM3_1" class="p7PM3-01 p7PM3 p7PM3noscript horiz menu-centered rounded auto-subs sub-left">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Resort</a>
          <ul>
            <li><a href="facilities.html">Our Facility</a></li>
            <li><a href="Kennel.html">Boarding &amp; Daycare</a></li>
            <li><a href="spa.html">Grooming</a></li>
            <li><a href="sparates.html">Rates</a></li>
            <li><a href="friendsgallery.html">Our Guests</a></li>
          </ul>
        </li>
        <li><a href="#">Show Handling</a>
          <ul>
            <li><a href="handlinginfo.html">Info</a></li>
            <li><a href="handlingrates.html">Rates</a></li>
            <li><a href="calendar.html">Schedule</a></li>
          </ul>
        </li>
        <li><a href="pics.html">Photo Gallery</a></li>
        <li><a href="aboutme.html">About Me</a></li>
        <li><a href="Contact3.html">Contact Me</a></li>
      </ul>
      <script type="text/javascript">P7_PM3op('p7PM3_1',1,8,-5,-5,0,1,0,1,0,1,1,1,0,900,1,0)</script>
    </div>
<br />
<!-- InstanceBeginEditable name="heading" -->
<h1 style="margin: 10px; clear: both; text-align:center; font-size: xx-large; font-family: Georgia, 'Times New Roman', Times, serif; padding-top:20px;">Cliff's Show Schedule</h1>
<!-- InstanceEndEditable -->


<div class="maincontent"><!-- InstanceBeginEditable name="content" -->

<iframe class="calendar"  src="https://www.keepandshare.com/calendar28/show.php?i=2585375&amp;ifr=y&amp;colorreset=y&amp;nw=y&amp;vw=week28&amp;themeChoice=0&amp;md=30&amp;nopopup=n&amp;fsz=11&amp;noviewmenu=y&amp;noname=y&amp;nobreak=y&amp;noprint=y&amp;norequest=n&amp;nosearch=n&amp;norss=y&amp;noovl=y&amp;notz=y&amp;fd=n&amp;sa=y&amp;exedit=n&amp;nonav=n&amp;scroll=y" width="700" height="600" scrolling="Yes" frameborder="1"></iframe><p align="center"><a href="https://www.keepandshare.com/calendar28/mobile.php?i=2585375&amp;mode=event" target="_blank">View a Mobile Version of this Calendar</a></p><!-- For help on embedding calendars go to http://support.keepandshare.com/support/solutions/97807 -->
</iframe>

<!-- InstanceEndEditable --></div>
    <!-- end .content --></div>
  
<div class="sidebar1"><!-- InstanceBeginEditable name="sidebar" --> 
      <p style="font-size:larger; font-family:'Comic Sans MS', cursive">&nbsp; </p><p style="font-size:16pt; font-family:'Comic Sans MS', cursive"> Most shows close two weeks prior to show date on Wednesday.</p>
   <p style="font-size:16pt; font-family:'Comic Sans MS', cursive"> Call early if you would like me to handle your dog.</p>
   <p><a style="font-size: small;" href="http://www.infodog.com/showinfo/showCal.htm" title="Infodog" target="_new">Enter a show via Infodog</a
     
  ></p>
<!-- InstanceEndEditable -->
  <!-- end .sidebar --></div>
  
  
  <div class="footer">
   
      <div style="float:right">
        <p> <a  href="MAILTO:rickzipser@hotmail.com" >Site Designed by Fredric M. Zipser</a><br />
          
       </p>
    </div> 
   
    <div class="clearfloatleft">
        <p>Clifford W. Steele  Professional Handler <br />
          1395 Rt. 6<br />
          Carmel, NY  10512-1627<br />
          United States<br />
          ph:(845) 225-2463<br />
          Cell:(845) 661-0010<br />
        <a  href="MAILTO:happydayskennelinc@hotmail.com" >happydayskennelinc@hotmail.com</a></p>
    </div>
  
  <!-- end .footer --></div>
  
<!-- end .container --></div>

</body> 
<!-- InstanceEnd --></html>
</body>

4条答案

按热度按时间

yzckvree1#

我想如果你用html创建两个链接会很容易

<li id="schedule_link_mobile">
    <a href="calendar2.html" >Schedule</a>
</li>
<li id="schedule_link_pc">
    <a href="calendar.html" >Schedule</a>
 </li>

然后使用css来隐藏你不想显示的

#schedule_link_mobile{
    display: none;
}
#schedule_link_pc{
    display: inline-block;
}
@media only screen 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)
{
    #schedule_link_mobile{
        display: inline-block;
    }

    #schedule_link_pc{
        display: none;
    }
}

赞(0）回复(0）举报 2023-02-01

jm81lzqq2#

我不认为CSS可以改变HTML属性
你可以只“隐藏”它，并显示另一个

@media only screen and (...) {
    .your-default-calendar {
        display: none;
    }
    .your-calender2 {
        display: inline-block;
    }
}

但是为什么不直接使用JavaScript呢？你可以在JavaScript中很容易地改变一个属性。

if (window.matchMedia("your media queries").matches) {
    // ...
}

zkure5ic3#

与此相关的是......您可以使用CSS content操作HTML ......以下内容摘自Chris Coyier，网址为CSS-tricks.com

.email-address:before {
content: "Email address: ";  }

<ul>
<li class="email-address">chriscoyier@gmail.com</li>
</ul>

输出结果如下所示：

• Email address: chriscoyier@gmail.com

v9tzhpje4#

要问的问题是：隐藏内容将如何使用。
display CSS属性隐藏已生成的HTML。如果您有移动的、平板电脑和桌面HTML，则应用程序可以生成HTML并应用CSS 3x，同时只显示一次。
如果它将被打开和关闭，显示器就可以工作。如果它将使用移动的或平板电脑或桌面显示器，而从不使用其他显示器，则使用Javascript添加内容更好。
请注意，AngularJS有ngIf和ngSwitch指令，它们只使用HTML属性来实现这一点。

从CSS媒体查询更改HTML

4条答案

相关问题

热门标签

最新问答