javascript - 如何将 HTML 页面调用到保留所有功能的 div 部分中的 jQuery 选项卡菜单?

标签 javascript jquery html css

我是 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 天时间才把这么多东西放在一起。我什至不知道有哪些选项可以让它发挥作用。有人可以帮我弄清楚该怎么做吗?单击页面时,我只需要这 2 个页面一起正常工作。感谢您的宝贵时间。

在获得几个选项后,顺便感谢你们的帮助,那没有用,我一直在研究代码,看看我能用它做什么。我正在发布代码,就像现在一样,几乎是它上传到网络后的样子。这是我到目前为止所拥有的:

    <!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 无法打开网页,最后一个代码在浏览器页面上给了我那个代码。所以我开始只是尝试使用代码,看看我能做什么。我几乎拥有我需要的东西。是的,我确实意识到有些代码放置不正确,但是当我放置正确时,图像根本没有显示在任何页面上。

这种方式的唯一问题是图像在所有页面上;他们只是应该在“关于”页面上。我将在联系页面上放置一个联系表格,并在图库页面上放置 3 个淡出、移动和淡入的不同图像。然后最终,在我在记事本中完成编码并在浏览器中检查以确保其正常工作之后,这个包含所有这些内容的“页面”将进入 Dreamweaver,其中将附加美学、外部链接、时钟和然后上传。那么,有人知道我接下来应该尝试什么吗?

最佳答案

您的问题是,您使 php - 标记不正确。

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

而且您还必须放置两个点才能到达父目录。

关于javascript - 如何将 HTML 页面调用到保留所有功能的 div 部分中的 jQuery 选项卡菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16065541/

相关文章:

javascript - MongoDB Node -mongodb- native 映射/减少

javascript - 单击功能后切换表格中的复选框

javascript - 隐藏,显示使用 jquery

javascript - 粘性导航栏无法正常工作

javascript - 并排和水平对齐两个div

javascript - 制作两个高度相等的并排div

javascript - 如何通过递增或递减值从数组中获取批量数组值

javascript - 有什么方法可以在没有 JavaScript 的情况下拉伸(stretch) div 吗?

javascript - 如何将容器内的每 2 个元素包装在 div 中,除了具有特定类的元素?

javascript - 如何检测 cordova iOS WebView 导航事件