2013-04-17 53 views
0

我是JavaScript新手,需要一些幫助來搞清楚如何把事情放在一起。我需要將我的JavaScript圖像循環html頁面放在我的jQuery菜單標籤頁上。這裏是我的jQuery代碼:如何在保留所有功能的div部分調用jQuery選項卡菜單的HTML頁面?

<!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的菜單頁關於我們的循環,但是,這並不工作,要麼;我得到的只是一個空白頁面。我對這件事情非常陌生,我幾乎不知道如何做到這一點。我花了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> 

我跟你們大家給我的代碼有什麼是一個空白的有關頁面,用一個框,窗口上下滾動和側頁到另一邊,並有一個錯誤消息中說,IE無法打開網頁,最後的代碼給了我在瀏覽器頁面上的代碼。所以我開始嘗試玩代碼,看看我能夠工作。我幾乎有我需要的東西。是的,我確實意識到某些代碼放置不正確,但是當我正確放置它時,圖像根本沒有顯示在任何頁面上。

這樣做的唯一問題是圖像在所有頁面上;他們只是應該在關於頁面上。我將在聯繫人頁面上放置一個聯繫表單,並在畫廊頁面上淡出,移動和淡入三個不同的圖像。然後,最終,在完成了NotePad的編碼並在瀏覽器中檢查以確保它可以正常工作之後,包含所有這些內容的這個「頁面」將在Dreamweaver中進行,它將具有附加的美感,外部鏈接,時鐘和然後上傳。那麼,有沒有人有任何想法,我應該嘗試下一步?

回答

0

你的問題是,你讓php標籤不正確。

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

而且你還必須提出兩點才能到達父目錄。

+0

感謝您的答覆,但該代碼並不工作。如果代碼是php,那不會在我的頁面上工作。此時,Dreamweaver上沒有任何內容,它只用NotePad進行編碼,並通過在瀏覽器中打開代碼來檢查代碼。如果它不這樣工作,我不能使用它。任何其他想法,包括僅使用HTML,JavaScript或jQuery的新代碼? – Pat

0

Ajax似乎是一個非常簡單的解決方案。
jQuery已經有它自己的易於使用Ajax功能。
其中之一是​​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

+0

感謝您的回覆,但它不能是Ajax。只有HTTP,jQuery或JavaScript。 – Pat

+0

您只能使用「Ajax」請求或「PHP」來獲取'html'頁面的內容。您無法使用Ajax的具體原因?另一個選項可能是使用'