Question

我有一种情况，当CSS媒体查询为真时，我想在HTML中的无序列表中更改HREF。具体来说，我想改变一个HREF 以下页面中的calendar.html到calendar2.html。这甚至可能吗？这是代码。

＆＃13;

<!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>

＆＃13;

Answer 1

我认为如果你在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;
    }
}

Answer 2

我认为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) {
    // ...
}

Answer 3

在相关说明上...您可以使用CSS Sub FindSquareBracketPairs() Dim rngFind As Word.Range Dim sOpen As String, sClose As String Dim sFindTerm As String Dim bFound As Boolean, lPosOpen As Long Set rngFind = ActiveDocument.content sOpen = "[" sClose = "]" sFindTerm = "\[*\]" With rngFind.Find .ClearFormatting .text = "\[*\]" .Forward = True .wrap = Word.WdFindWrap.wdFindStop .MatchWildcards = True bFound = .Execute Do While bFound lPosOpen = NumberOfCharInRange(rngFind, sOpen) rngFind.HighlightColorIndex = Word.WdColorIndex.wdYellow rngFind.Collapse wdCollapseEnd bFound = .Execute Loop End With End Sub 'Checks whether there's more than one instance of searchTerm in the rng.Text 'For each instance above one, move the Start point of the range 'To the position of that instance until no more are "found". 'Since the Range is passed ByRef this will change the original 'range's position in the calling procedure. Function NumberOfCharInRange(ByRef rng As Word.Range, _ ByRef searchTerm As String) As Long Dim lCountChars As Long, lCharPos As Long Dim s As String s = rng.text Do lCharPos = InStr(s, searchTerm) If lCharPos > 1 Then lCountChars = lCountChars + 1 rng.Start = rng.Start + lCharPos End If s = Mid(s, lCharPos + 1) Loop Until lCharPos = 0 NumberOfCharInRange = lCountChars End Function操作HTML ... 以下摘自CSS-tricks.com上的Chris Coyier

content

输出将是：

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

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

Answer 4

要问的问题是：如何使用隐藏的内容。

显示CSS属性隐藏已构建的HTML。如果您有移动设备，平板电脑和桌面HTML，则应用程序可以构建HTML并应用CSS 3x，同时只显示一次。

如果它将打开和关闭，显示工作。如果它将使用移动设备或平板电脑或桌面显示器而从不使用其他设备，则使用Javascript添加内容会更好。

请注意，AngularJS具有ngIf和ngSwitch指令，这些指令仅使用HTML属性来实现。

从CSS媒体查询更改HTML

4 个答案: