2015-02-05 29 views
7

Tôi có một tình huống trong đó tôi muốn thay đổi HREF trong danh sách không theo thứ tự trong HTML khi truy vấn phương tiện CSS là đúng. Cụ thể là tôi muốn thay đổi HREF từ calendar.html thành calendar2.html trong trang sau. Điều này thậm chí có thể? Đây là mã.Thay đổi HTML từ truy vấn phương tiện 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>

Trả lời

15

Tôi nghĩ rằng nó sẽ dễ dàng nếu bạn tạo cả hai liên kết trong 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> 

và sau đó sử dụng css để che giấu một trong đó bạn không muốn hiển thị

#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

excelent nó hoạt động giải pháp hiểu biết hoàn toàn và rất công nghệ –

+0

Tại sao điều này không được đánh dấu là câu trả lời đúng? – Staveven

+0

Ý tưởng tuyệt vời. Cảm ơn bạn. –

2

Tôi không nghĩ CSS có thể thay đổi các thuộc tính HTML

bạn có thể chỉ là "che giấu" nó, và hiển thị khác một

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

nhưng tại sao không chỉ cần sử dụng JavaScript? bạn có thể thay đổi một thuộc tính dễ dàng trong JavaScript.

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

Câu hỏi cần đặt ra là: Nội dung ẩn sẽ được sử dụng như thế nào.

Thuộc tính CSS hiển thị ẩn HTML đã được tạo. Nếu bạn có điện thoại di động, máy tính bảng và HTML trên máy tính để bàn, ứng dụng có thể đang tạo HTML và áp dụng CSS 3x trong khi chỉ hiển thị một lần.

Nếu nó sẽ được bật và tắt, hiển thị các công trình. Nếu nó sẽ sử dụng một điện thoại di động hoặc máy tính bảng hoặc màn hình máy tính để bàn và không bao giờ sử dụng những người khác, sử dụng Javascript để thêm nội dung là tốt hơn.

Lưu ý rằng AngularJS có các chỉ thị ngIf và ngSwitch thực hiện điều đó chỉ bằng cách sử dụng các thuộc tính HTML.

Các vấn đề liên quan