从CSS媒体查询更改HTML [英] Changing HTML from CSS media query
本文介绍了从CSS媒体查询更改HTML的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一种情况，当CSS媒体查询为true时，我想在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.dwtcodeOutsideHTMLIsLocked =false - >< head>< meta http- equiv =X-UA-Compatiblecontent =IE = 11; 10; IE = 9; IE = 8; IE = 7; IE = EDGE/>< meta http- equiv =Content-Typecontent =text / html; charset = utf-8/> ; meta name =viewportcontent =width = device-width/>< style> @media only screen and（max-device-width：667px）and（orientation：portrait）and（-webkit- 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>无标题文件< / title>< / - InstanceBeginEditable name =doctitle - >< title> Cliff的显示时间表< / title><！ - InstanceEndEditable - >< style type =text / css> <！---->< / style> <！ - [if lte IE 7]>< style> .content {margin-right：-1px; } ul.nav a {zoom：1; $>
解决方案
将很容易，如果你创建两个链接在html
< li id =schedule_link_mobile>
< a href =calendar2.html>日程< / a>
< / li>
< li id =schedule_link_pc>
< a href =calendar.html>日程< / 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;
}
}
I have a situation in which I want to change an HREF in an unordered list in HTML when a CSS media query is true. Specifically I want to change an HREF from calendar.html to calendar2.html in the following page. Is this even possible? Here is the code.
<!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 & 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&ifr=y&colorreset=y&nw=y&vw=week28&themeChoice=0&md=30&nopopup=n&fsz=11&noviewmenu=y&noname=y&nobreak=y&noprint=y&norequest=n&nosearch=n&norss=y&noovl=y&notz=y&fd=n&sa=y&exedit=n&nonav=n&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&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"> </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>
解决方案
I think it will easy if you create both link in 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>
and then use the css to hide the one that you don't want to show
#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;
}
}
这篇关于从CSS媒体查询更改HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
