javascript - 如何使用 javascript 函数重用 HTML 代码块?

原文 标签 javascript jquery html css optimization

我试图在几个地方和页面中使用相同的 HTML block ,同时保持低代码行数和低冗余。

基本上,我需要类似于函数的东西,当它被调用时,它只会将 HTML 代码加载到页面中 - 这将在页面加载时完成,因此无需单击或其他需要触发它的操作。

我不想使用 PHP 包含。

例子:

<div class="x">
   <div class="y">
      <div class="z"></div>
   </div>
</div>


我需要在 100 多页中使用相同的 X 类,并且它具有相同的内容。

仅插入 X 类和要自动添加的内部内容的最佳方法是什么?

最佳答案

你可以把你的代码放在不同的 .html文件并使用 .load() 加载它http://api.jquery.com/load/

$('#targetid').load('somewhere/a.html'); // loads the .html in the #targetid

main.html
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Main page</title>
        <sript src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
             $(function(){
                  $('#commonsection').load('reusablefile.htm');

                  // which is eqvivalent to:
                  //
                  // $.ajax({
                  //     url: 'reusablefile.htm',
                  //     dataType: 'html',
                  //     success: function(data){
                  //         $('#commonsection').html(data);
                  //     }
                  // });
             });
        </script>
     </head>
     <body>
         <div id="commonsection"></div>
     </body>
</html>

可重用文件.html:
<script>
    (function($){ //separate scope to keep everything "private" for each module
        //do additional javascript if required
    })(jQuery);
</script>
<p>...Some non-trivial content...</p>

关于javascript - 如何使用 javascript 函数重用 HTML 代码块?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35093849/

相关文章:

javascript - JavaScript Auto建议更新多个字段

jquery - 在 Bootstrap Carousel 上更改事件类时更改背景

javascript - HTML输入自动填充占位符

html - Bootstrap导航药丸的左右填充不相等

html - 是否总是认为单独的CSS文件优于内联样式?即使是一次性调整?

javascript - 隐藏除单击的行AngularJS之外的所有表行

javascript - 将鼠标悬停在元素上时显示警报

javascript - 使Chrome扩展程序刷新已打开的页面,而不是打开新页面

javascript - 用动画循环更改html元素

css - 背景图片未出现在我的网站上