2015-02-05 15 views
7

मेरे पास एक ऐसी स्थिति है जिसमें मैं एक सीएसएस मीडिया क्वेरी सत्य होने पर एचटीएमएल में एक अनियंत्रित सूची में एचआरईएफ बदलना चाहता हूं। विशेष रूप से मैं निम्नलिखित पृष्ठ में कैलेंडर.html से कैलेंडर 2.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) 
 

 
    { 
 
\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>

उत्तर

15

मुझे लगता है कि अगर आप 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> 

बनाने और उसके बाद एक यह है कि आप

को दिखाने के लिए नहीं करना चाहते हैं छिपाने के लिए सीएसएस का उपयोग आसान होगा
#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

इसे सही उत्तर के रूप में क्यों चिह्नित नहीं किया गया? – Staveven

+0

ग्रेट विचार। धन्यवाद। –

2

मुझे नहीं लगता कि सीएसएस HTML विशेषताओं को बदल सकता है

आप इसे "छिपाने", और प्रदर्शित कर सकते हैं एक दूसरे

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

लेकिन क्यों न सिर्फ जावास्क्रिप्ट का उपयोग करें? आप जावास्क्रिप्ट में आसानी से एक विशेषता बदल सकते हैं।

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

प्रश्न पूछने का सवाल यह है कि: छिपी सामग्री का उपयोग कैसे किया जाएगा।

प्रदर्शन सीएसएस संपत्ति पहले से ही बनाई गई HTML को छुपाती है। यदि आपके पास मोबाइल, टैबलेट और डेस्कटॉप एचटीएमएल है, तो एप्लिकेशन एचटीएमएल का निर्माण कर सकता है और केवल एक बार प्रदर्शित करते समय सीएसएस 3 एक्स लागू कर सकता है।

यदि यह चालू और बंद हो जाएगा, तो प्रदर्शन प्रदर्शित करें। यदि यह या तो मोबाइल या टैबलेट या डेस्कटॉप डिस्प्ले का उपयोग करेगा और सामग्री को जोड़ने के लिए जावास्क्रिप्ट का उपयोग करके दूसरों का कभी भी उपयोग नहीं करेगा।

ध्यान दें कि AngularJS में ngIf और ngSwitch निर्देश हैं जो केवल HTML विशेषताओं का उपयोग करते हैं।

संबंधित मुद्दे