Ändern von HTML von CSS-media-query

Habe ich eine situation, in der ich mich ändern will ein HREF in einer ungeordneten Liste in HTML, wenn ein CSS-media-query ist wahr. Speziell möchte ich ändern, HREF aus
calendar.html zu calendar2.html auf der folgenden Seite. Ist das überhaupt möglich?
Hier ist der code.

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:[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>

InformationsquelleAutor rickzipser | 2015-02-05

css media-queries

Ich denke, es wird einfach, wenn Sie erstellen link im 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>

verwenden und dann die css zu verstecken, dass Sie nicht wollen, um zu zeigen,

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

Warum nicht markiert, da die richtige Antwort?
Tolle Idee. Danke.
Es ist der Weg zu gehen, so sollte markiert sein, als die richtige Antwort. Ich mag auch den Ansatz von @Lukas-5-dev aber lieber nicht mischen, Inhalt und Stil, bedeutet, zu vermeiden, mit Inhalt, CSS-und Umgekehrt vermeiden Sie html-Tabellen für das layout.

InformationsquelleAutor Varavut Lormongkol

Ich glaube nicht, dass CSS ändern können Sie HTML-Attribute

können Sie nur "versteckt" und zeigen Sie den anderen

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

aber warum nicht einfach die JavaScript verwenden? Sie können ein Attribut leicht in JavaScript.

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

InformationsquelleAutor CodinCat

1

Auf ein zugehöriger Hinweis... Sie manipulieren kann HTML mit CSS content ...
Die folgenden genommen von Chris Coyier bei CSS-tricks.com
```
.email-address:before {
content: "Email address: ";  }

<ul>
<li class="email-address">chriscoyier@gmail.com</li>
</ul>
```
Und die Ausgabe würde wie:
```
• Email address: chriscoyier@gmail.com
```
- Ich mag den Ansatz, aber lieber nicht mischen, Inhalt und Stil, bedeutet, zu vermeiden, mit content in CSS und Umgekehrt vermeiden Sie html-Tabellen für das layout.
InformationsquelleAutor Luke 5 Dev
0

Sich die Frage: Wie wird der versteckte Inhalt verwendet werden.

Die CSS-Eigenschaft display versteckt sich HTML-Code, der bereits eingebaut ist. Wenn Sie mobile, tablet und desktop-HTML, die Anwendung können Sie HTML-Gebäude und anwenden von CSS-3x, während nur die Anzeige einmal.

Wenn es ein-und ausgeschaltet werden, die Anzeige funktioniert. Wenn es entweder ein Handy oder ein tablet oder ein desktop-display und verwenden Sie niemals die anderen, die mithilfe von Javascript hinzufügen, um den Inhalt besser ist.

Beachten Sie, dass AngularJS hat ngIf und ngSwitch Richtlinien zu erreichen, was nur mit HTML-Parametern.

InformationsquelleAutor DavidNJ

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.