如何通过单击按钮包含 html 文件

How to include html file by clicking button

本文关键字：html 文件 包含 按钮 何通过 单击      更新时间：2023-09-26

我有 4 个按钮，每个按钮都必须在我的索引中包含 html 文件.html

我的按钮：

<div class="btn-group btn-group-lg">
                        <button type="button" class="btn btn-primary" ng-click="changePage2Content('page2page1.html')">
                            Chapter 1
                        </button>
                        <button type="button" class="btn btn-primary" ng-click="changePage2Content('page2page2.html')">
                            Chapter 2
                        </button>
                        <button type="button" class="btn btn-primary" ng-click="changePage2Content('page2page3.html')">
                            Chapter 3
                        </button>
                        <button type="button" class="btn btn-primary" ng-click="changePage2Content('page2page4.html')">
                            Chapter 4
                        </button>
                    </div>

我的js：

<script cam-script type="text/form-script">
                inject(['$scope',function($scope){
                    $scope.url = '';
                    function changePage2Content(path)
                    {
                        $scope.url = path;
                    }
                }]);
            </script>

我的div 必须显示包含的文件：

<div class="row" ng-include='url'>
</div>

简单的方法：使用 jQuery 的 .load（）

<div class="row" id="resultWrapper"></div>
<button type="button" class="btn btn-primary" data-href="chapter-1.html">
    Chapter 1
</button>
<button type="button" class="btn btn-primary" data-href="chapter-2.html">
    Chapter 2
</button>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('button').on('click', function() {
            $('#resultWrapper').load($(this).data('href'));
        });
    });
</script>

使用 Jquery 很简单：

$( "#result" ).load( "ajax/test.html" );

您可以在此处阅读有关它的更多信息：http://api.jquery.com/load/

相关文章：