使用CSS（第一首選項）或javascript（首選首選項）在引導程序中更改數據目標

 <!DOCTYPE html> 
     <html lang="en"> 
     <head> 
      <title>Bootstrap Example</title> 
      <meta charset="utf-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
      <style> 
      @media screen and (min-width:500px) 
      { 
      .col-xs-4 
       { 
        text-align:center; 
       } 
      } 


      @media screen and (min-width:700px) 
      { 
      .col-xs-4 
       { 
        text-align:center; 
        width:100%; 
       } 
      } 



      .col-xs-4{ 
      text-align:center; 
      } 
      div .col-xs-4:hover{ 

      } 
      .btn-primary{ 
      width:100%; 
      } 
      </style> 

     </head> 
     <body> 

     <div class="container-fluid"> 
      <h1>Hello World!</h1> 
      <p>Resize the browser window to see the effect.</p> 
      <div id=""> 
      <div class="col-xs-4" style="background-color:lavender;"><button type="submit"; data-toggle="collapse"; data-target="#doctorVisit"; class="btn btn-primary">Doctor Visit</button></div> 
      <div id="doctorVisit" class="collapse"> 
      <table class="table"; width:500px; height:300px; > 
      <thead> 
       <tr> 
       <th>Sr. No.</th> 
       <th>Visited with</th> 
       <th>Time</th> 
       <th>edit</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr class="success"> 
       <td>John</td> 
       <td>Doe</td> 
       <td>[email protected]</td> 
       <td>Doe</td> 
       </tr> 
       <tr class="danger"> 
       <td>Mary</td> 
       <td>Moe</td> 
       <td>[email protected]</td> 
       <td>Doe</td> 
       </tr> 
       <tr class="info"> 
       <td>July</td> 
       <td>Dooley</td> 
       <td>[email protected]</td> 
       <td>Doe</td> 
       </tr> 
      </tbody> 
      </table> 
     </div> 
      <div class="col-xs-4" style="background-color:lavender;"><button type="submit"; id="pharmacyVisitBtn" data-toggle="collapse"; data-target="#pharmacyVisit"; class="btn btn-primary">Pharmacy Visit</button></div> 
      <div id="pharmacyVisit" class="collapse"> 
      <table class="table"; width:500px; height:300px; > 
      <thead> 
       <tr> 
       <th>Firstname</th> 
       <th>Lastname</th> 
       <th>Email</th> 
       <th>edit</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr class="success"> 
       <td>John</td> 
       <td>Doe</td> 
       <td>[email protected]</td> 
       <td>Doe</td> 
       </tr> 
       <tr class="danger"> 
       <td>Mary</td> 
       <td>Moe</td> 
       <td>[email protected]</td> 
       <td>Doe</td> 
       </tr> 
       <tr class="info"> 
       <td>July</td> 
       <td>Dooley</td> 
       <td>[email protected]</td> 
       <td>Doe</td> 
       </tr> 
      </tbody> 
      </table> 
     </div> 
     <div class="col-xs-4" style="background-color:lavender;"><button type="submit"; data-toggle="collapse"; data-target="#stockistVisit"; class="btn btn-primary">Stockist Visit</button></div> 
      <div id="stockistVisit" class="collapse"> 
      <table class="table"; width:500px; height:300px; > 
      <thead> 
       <tr> 
       <th>Firstname</th> 
       <th>Lastname</th> 
       <th>Email</th> 
       <th>edit</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr class="success"> 
       <td>John</td> 
       <td>Doe</td> 
       <td>[email protected]</td> 
       <td>Doe</td> 
       </tr> 
       <tr class="danger"> 
       <td>Mary</td> 
       <td>Moe</td> 
       <td>[email protected]</td> 
       <td>Doe</td> 
       </tr> 
       <tr class="info"> 
       <td>July</td> 
       <td>Dooley</td> 
       <td>[email protected]</td> 
       <td>Doe</td> 
       </tr> 
      </tbody> 
      </table> 
     </div> 
      </div> 
     </div> 

     <script> 
     function show() 
     { 
     alert ("hey"); 

     } 
     </script> 



     </body> 
     </html>

請使用服務器運行上述操作。參考上面的代碼。使用CSS（第一首選項）或javascript（首選首選項）在引導程序中更改數據目標

Exaplaination：當屏幕尺寸很小時，我想將'data-target'更改爲id #stockistVisit。我可以使用CSS嗎？

如果我不能使用CSS，我可以使用JavaScript嗎？

即時通訊也使用angularjs。它也可以用它來完成嗎？

來源

2016-01-24 Clyde Dias

你的問題不清楚？我知道你在小屏幕上遇到麻煩了嗎？如果是的話，你可以在按鈕的div上使用絕對位置。檢查這個小提琴http://jsfiddle.net/cnzxc37v/ –

您不能使用媒體查詢更改數據屬性，但可以使用JavaScript更改它（下面的jQuery示例）。

$(window).resize(function() { 
    if ($(this).width() < 500) $('target-here').data('blue', 1); 
    else $('target-here').data('blue', 2); 
});

.width()以像素爲單位返回窗口寬度。使用一些簡單的條件語句，您可以根據當前寬度將數據屬性更改爲不同的值。

來源

2016-01-24 06:21:40 michael

@ michael ......你可以請exaplain參數'目標 - 這裏'和（'藍'，1）？ –

'target-here'是您嘗試更改數據屬性的元素的jQuery選擇器。例如，如果你有'

'，選擇器就是'$（'＃changeMe'）'。 '（'blue'，1）'部分將數據屬性「blue」設置爲「1」的值。它本質上是在div元素上設置'data-blue =「1」'。 – michael

使用CSS（第一首選項）或javascript（首選首選項）在引導程序中更改數據目標

回答

相關問題