2016-12-14 4 views
0

Я создал вкладки с использованием кода html и css. Содержимое, отображаемое на каждой вкладке, размещается на разных html-страницах. Я хочу загрузить содержимое вкладки без использования каких-либо API (jquery/PHP ..). Я хочу загрузить html-страницы, когда пользователь перейдет на вкладки, и я хочу использовать только html/javascript для этого.html/код javascript для загрузки html-страниц

Code demo

Я попытался использовать код, приведенный ниже, но его не работает.

<html> 
<head> 
    <script src="http://www.w3schools.com/lib/w3data.js"></script> 
    <script> 
     w3IncludeHTML(); 
    </script> 
</head> 
<body> 
.. 
    <div class="tab"> 
     <input type="radio" id="tab-1" name="tab-group-1" checked> 
     <label for="tab-1">Tab1</label> 
     <div class="content"> 
      <div w3-include-html="tab1Content.html"></div> 
     </div> 
    </div> 
</body> 
+0

Возможно, вы захотите попробовать включить CSS, который задает поведение вкладок. Я также предложил бы установить '..' после вашего первого тега' ' –

ответ

1

Я использовал, чтобы добавить IFRAME в DIV:

<div class="content"> 
    <iframe src="file.html">  
    </iframe> 
</div> 
0

Есть несколько способов сделать это.
1.) плавающие фреймы
Вместо этого:

<div w3-include-html="tab1Content.html"></div> 

ли это:

<iframe src="tab1Content.html"></iframe> 

2.) PHP
Если по каким-то причинам плавающие фреймы не работают для вас , вы можете сделать это в php:

<div class="content"><?php echo file_get_contents("tab1Content.html");?></div> 

Смежные вопросы