Question

我找到了这个例子，其中有一个form.html页面，其中包含使用bootstrap的导航栏的设计。另一个页面只是一个content.html页面，其中只包含内容和jquery脚本。内容页面的示例：

<body><h1>hello world!</h1></body>
<--jquery script calling another function from a .js file-->

当我访问form.html时，我会点击导航栏中的消息标签。它会在content.html

中显示form.html

我的问题是如何做到这一点。它的高效性使我们不必再次复制和粘贴设计。这是jquery的功能吗？有没有任何在线tuturials？我无法找到解决方案。

Answer 1

我假设您在询问表单/内容页面如何共享相同的设计/导航栏。如果是这样，有几种方法可以做到这一点。

如前所述，复制并粘贴，但这很难维护。
导航栏是网站母版页的一部分。表单/内容页面是...这个母版页的正文。此选项虽然会重新加载导航栏，但不需要为其显示的每个页面重新编码。
Ajax，正如您所怀疑的那样。可以使用ajax通过javascript调用动态更新网页主体。在内容更改时，不会重新加载导航栏。

Answer 2

请参阅以下链接，您可能会有所想法，

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajax

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_text_set

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_replacewith

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").text("Hello world!");
    });
});
</script>
</head>
<body>

<button>Set text content for all p elements</button>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

＆＃13;

对于链接，我已经添加了动态更改内容的代码，同时根据处理的链接加载gif。直到链接被处理，它将显示加载图像及其各自的内容。下面的叠加功能用于加载gif图像。

 <script>
var overlay = {

    click_on_overlay_hide : true,

    show_loading_image : true,

    loading_image : "images/loading.gif",

    $ : function(id) {
        return document.getElementById(id);
    },

    init : function() {
        var ol_div = document.createElement("div");

        ol_div.id = "overlay";
        ol_div.style.display = "none";
        ol_div.onclick = (this.click_on_overlay_hide) ? overlay.hide : null;

        if (this.show_loading_image) {
            var l_img = document.createElement("img");

            l_img.src = this.loading_image;
            l_img.style.position = "absolute";
            l_img.style.top = (((window.innerHeight) ? window.innerHeight
                    : document.body.clientHeight) / 2)
                    + "px";
            l_img.style.left = (((window.innerWidth) ? window.innerWidth
                    : document.body.clientWidth) / 2)
                    + "px";

            ol_div.appendChild(l_img);
        }

        document.body.appendChild(ol_div);
    },

    show : function() {
        if (this.$("overlay")) {
            this.$("overlay").style.display = "";
        }
    },

    hide : function() {
        if (overlay.$("overlay")) {
            overlay.$("overlay").style.display = "none";
        }
    }

}
        function First() {
                document.getElementById("di").innerHTML = "";
                document.getElementById("di").innerHTML = "<center><h6>I am First</h6></center>";
                        }
        function Second() {
                document.getElementById("di").innerHTML = "";
                document.getElementById("di").innerHTML = "<center><h6>I am Second</h6></center>";
            }
      </script>

 <body onload=overlay.init();">      
               <div style="display: none;" id="overlay">
                        <h1>
                            <img class="centerImg" src="images/loading.gif">

    //Below tag content will change according to the link processed
                            <div id="di">Processing the url...</div>

                        </h1>
                    </div>


      //First link  
      //It will call the First() and changes the content of id="di" into  "I am First" ,displayed along with the gif image,till the href link is processed.
   <a href="services/dealjson/first" onclick="First(); overlay.show(); setTimeout('overlay.hide()', 20000)">FIRST</a>

      //Second link      
   <a href="services/dealjson/second" onclick="Second(); overlay.show(); setTimeout('overlay.hide()', 13000)">SECOND</a>
  </body>

网站使用bootstrap和jquery更改内容

2 个答案: