Modifica HTML da query multimediale CSS

Ho una situazione in cui voglio modificare un HREF in un elenco non ordinato in HTML quando una query multimediale CSS è vera. Nello specifico voglio cambiare un HREF da calendar.html a calendar2.html nella pagina seguente. È possibile? Ecco il codice.Modifica HTML da query multimediale CSS

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

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

 

 
<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:[email protected]" >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:[email protected]" >[email protected]</a></p> 
 
    </div> 
 
    
 
    <!-- end .footer --></div> 
 
    
 
<!-- end .container --></div> 
 

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

fonte

2015-02-05 rickzipser

Penso che sarà facile se si crea sia il 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>

e quindi utilizzare il CSS per nascondere quello che non si vuole mostrare

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

fonte

2015-02-05 02:03:35

eccellente funziona perfettamente e soluzione molto esperta tecnologia –

Perché questo non viene contrassegnato come la risposta corretta? – Staveven

Ottima idea. Grazie. –

Non penso che i CSS possano alterare gli attributi HTML

si può solo "nascondere", e visualizzare l'altra

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

ma perché non basta usare JavaScript? puoi modificare facilmente un attributo in JavaScript.

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

fonte

2015-02-05 02:07:28 CodinCat

La domanda da porsi è: come verrà utilizzato il contenuto nascosto.

La proprietà CSS di visualizzazione nasconde l'HTML che è già stato creato. Se disponi di HTML per dispositivi mobili, tablet e desktop, l'applicazione può creare HTML e applicare CSS 3x mentre viene visualizzata solo una volta.

Se viene acceso e spento, il display funziona. Se utilizzerà uno schermo mobile o tablet o desktop e non utilizzerà mai gli altri, usare Javascript per aggiungere il contenuto è meglio.

Si noti che AngularJS ha direttive ngIf e ngSwitch che eseguono tale solo utilizzando gli attributi HTML.

fonte

2017-10-10 17:46:48 DavidNJ

Modifica HTML da query multimediale CSS

risposta

Problemi correlati