Как отобразить два веб-контента в одном браузере поочередно, без перезагрузки? - PullRequest
Новая
       4

Как отобразить два веб-контента в одном браузере поочередно, без перезагрузки?

0 голосов
/ 13 декабря 2018

На самом деле я создал приложение Cordova на две страницы.Я хочу сделать их на одной странице и отображать второй контент только после события клика, а затем вернуться к первому контенту.но хочу загрузить всю страницу при первой загрузке.В приведенном ниже примере я создал две таблицы красного и синего цвета.Я хочу загрузить всю страницу, но по умолчанию отображать только красный, а затем синий.Я хочу, чтобы весь контент загружался одновременно, но по умолчанию отображается только красным и синим при нажатии.

<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table style="width:100%" bgcolor="red" height =500px>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<table style="width:100%" bgcolor="green"height=500px>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>

с.

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018 

<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table id="pressme" style="width:100%" bgcolor="red" height =500px>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<table id="showme" style="width:100%;display:none;" bgcolor="green"height=500px>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<script>
var pressme = document.getElementById('pressme');
var showme = document.getElementById('showme');
pressme.addEventListener('click', function(){
  pressme.style.display = 'none';
  showme.style.display = 'block';
});
</script>
</body>
</html>
0 голосов
/ 14 декабря 2018

Установить display: 'none' во второй таблице , загрузить всю страницу и удалить это свойство CSS после того, как произошло событие щелчка.Используйте CSS class для этого свойства.

Это действительно просто, надеюсь, я вас правильно понял:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...