Question

我有4个按钮，每个按钮都必须在我的index.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>

Answer 1

使用Jquery很简单：

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

您可以在此处详细了解：http://api.jquery.com/load/

Answer 2

简单方法：使用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>

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

2 个答案: