如何在保留所有功能的div部分中將HTML頁面調用到jQuery選項卡菜單？

Question

我是JavaScript新手，需要一些幫助弄清楚如何將它們組合在一起。 我需要將我的JavaScript圖像循環html頁面放在jQuery菜單選項卡頁面上。 這是我的jQuery代碼：

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness /jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
    $( "#tabs" ).tabs();
    });
    </script>
    </head>
    <body>
    <div id="tabs">
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about-me">About me</a></li>
    <li><a href="#contact-us">Contact us</a></li>
    <li><a href="#gallery">Gallery</a></li>
    </ul>
    <div id="home">
    <p>A short paragraph about Overcoming Obstacles.</p>
    </div>
    <div id="about-me">
    <p>A short paragraph about me.Banner advertisement that uses a JavaScript function to change the image every few seconds using three images.</p>
    </div>
    <div id="contact-us">
    <p>My contact details.</p>
    </div>
    <div id="gallery">
    <p>This is my gallery.</p>
    </div>
    </div>
    </body>
    </html>

我需要幫助的部分是“關於我”頁面。 我使用頁面描述創建了圖像循環，並且該循環有效。 我需要做的是將About_me.html（名為Brunson_About_me_rotate2.html）調用到具有所有功能的jQuery菜單選項卡頁面。 但是我只知道如何使用HTML，CSS，JavaScript，jQuery，因為這就是我所知道的全部方法。 使用Ajax，ASP，PHP或SPRY無法完成此操作，因為我不知道如何使用它們，而這對我來說現在已經很頭疼。 而且它必須與客戶端（而不是服務器）一起工作。 另外，這將進入Dreamweaver頁面。

我試圖將帶有文本的循環代碼放入“選項卡菜單”代碼的“關於我們”部分中，但這是行不通的。 或者，我嘗試了：

    <? include("./Brunson_About_us_rotate2.html");?>

（因為這就是文件名）試圖在jQuery菜單頁面About us中調用循環，但這也不起作用。 我得到的只是一個空白頁。 我對這件事很陌生，我幾乎不知道該如何實現。 我花了5天的時間來整理這些東西。 我什至不知道有什么選項可以使其工作。 有人可以幫我弄清楚該怎么辦嗎？ 單擊頁面后，我只需要這兩個頁面即可正常工作。 感謝您的時間。

在獲得了幾種選擇之后，謝謝你們倆的幫助，但是那還是行不通的，我一直在研究代碼，看看我能用它做什么。 我正在發布代碼，就像現在一樣，以及將代碼上傳到網絡后的樣子。 這是我到目前為止的內容：

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Brunson - Home</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness  /jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
    $( "#tabs" ).tabs();
    });
    </script>
    </head>
    <body>
    <div id="tabs">
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#gallery">Gallery</a></li>
    </ul>
    <div id="home">
    <p><h2>What is a Life Coach?</h2></p>
    <p>A life coach is someone who is an advocate for you in reaching a higher level of understanding<br /> 
    and being the best person you can be in whatever area of your life you decide you need improvement in.</p> 
    <p><h2>What does a Life Coach do?</h2></p>
    <p>A Life Coach assists you in identifying those areas in your life that you would like to change.<br /> 
    Once those areas are determined, the process of creating the life you truly can begin.</p>
    </div>
    <div id="about">
    <script type="text/javascript">
    var pictureArchive= ['image1.jpg','image2.jpg','image3.jpg'];

    window.onload=function() {
    var o=document.createElement('img');
    o.setAttribute('id', 'image');
    o.setAttribute('src', pictureArchive[0]);
    o.setAttribute('alt', '');
    document.body.appendChild(o);
    rotate(pictureArchive.length);
    }

    function rotate(idx) {
    if(idx>=pictureArchive.length) {
    idx=0;
        }
    document.getElementById('image').src=pictureArchive[idx++];
    timerID=setTimeout('rotate('+idx+')', 4000);
    }
    </script>
    <script>
    $(function() {
    $( "#tabs" ).tabs();
    });
    </script>
    <p>I became a Life Coach so I could reach more people and make changes in more lives than I was 
    able to do when I limited myself to my Alternative Therapies Business. By choosing to take the 
    limits I placed on myself off, I have created abundance in my life and create more value than I 
    was able to do before. The school I chose to get my Life Coach Certification from was QSCA because 
    they have the same beliefs that I do. Living the Universal Laws, living my life with integrity, 
    being the best that I can be, and ascending to higher levels of awareness and consciousness allows 
    me to help others overcome negative behaviors and limited thinking patterns. Helping others this 
    way allows me to create a reality that is past the negativeness we have been living with.</p>
    </div>
    <div id="contact">
    <p>My contact details. Form asking for name, email address, and a message. The form will have an unselected radio button array that includes a yes or no response. All fields required. Validation of all fields is a must. Email address must be present and match</p>
    <p>the criteria for a legitimate e-mail address (using regular expressions). The submit button must call a validation routine; and when the user has filled in all information correctly, the page will display a thank you message and clear the form. The ehank you message can be s separate page, or it can be displayed on the same page.</p>
    <p>Are you ready to make a change in your life right now? Yes No</p>
    </div>
    <div id="gallery">
    <p>Once you make a choice to make a change, old limiting beliefs seem to just fade away.</p>
    <p>As nature abhors a vacuum, unlimited beliefs seem to jump to the fore.</p>
    <p>Where once there was nothing but limits, suddenly everything is possible.</p>
    </div>
    </div>
    </body>
    </html>

ya'll給我的代碼是關於頁面的空白，一個帶有框的頁面在窗口中上下左右滾動，並顯示一條錯誤消息，指出IE無法打開網頁，最后一個是代碼在瀏覽器頁面上給了我該代碼。 因此，我開始嘗試使用代碼，看看可以做什么。 我幾乎有需要的東西。 是的，我確實意識到某些代碼沒有正確放置，但是當我正確放置它們時，圖像在任何頁面上都沒有顯示。

這樣的唯一問題是，圖像在所有頁面上。 它們應該只是在“關於”頁面上。 我將在“聯系方式”頁面上放置一個聯系表單，並在圖庫頁面上淡出，移動和淡入3張不同的圖像。 然后，最終，在我完成在NotePad中的編碼並在瀏覽器中對其進行檢查以確保其正常工作之后，包含所有這些內容的“頁面”將進入Dreamweaver，其中將附加美學，外部鏈接，時鍾和然后上傳。 那么，有人對我接下來應該嘗試的內容有任何想法嗎？

Answer 1

您的問題是，您使php-標記不正確。

<?php include("../Brunson_About_us_rotate2.html"); ?>

並且您還必須放置兩點才能到達父目錄。

Answer 2

Ajax似乎是一個非常簡單的解決方案。
jQuery已經很容易使用ajax函數。
其中之一就是.load() http://api.jquery.com/load/

$('#about-me').load('../Brunson_About_us_rotate2.html');

另一種選擇是iframe

<div id="about-me">
    <iframe src="../Brunson_About_us_rotate2.html"></iframe>
</div>

http://www.w3schools.com/tags/tag_iframe.asp

如何在保留所有功能的div部分中將HTML頁面調用到jQuery選項卡菜單？

問題描述

2 個解決方案

解決方案1
0 2013-04-17 16:43:36

解決方案2
0 2013-04-17 20:15:20

如何在保留所有功能的div部分中將HTML頁面調用到jQuery選項卡菜單？

問題描述

2 個解決方案

解決方案1 0 2013-04-17 16:43:36

解決方案2 0 2013-04-17 20:15:20

解決方案1
0 2013-04-17 16:43:36

解決方案2
0 2013-04-17 20:15:20