如何調用一個html<div> 來自<a href>同一個 html 文件上的鏈接</a>

Question

我有一個文本，當我單擊該文本時，它會調用 . 我的代碼如下。

<h5>Posted On: {{postedDate | date}} <a href="" style="float:right" >Table Plans</a></h5>

當我單擊Table Plans ，它應該調用div with id "tableImagesSliding"的div with id "tableImagesSliding" 。

<div id="tableImagesSliding" class="col-md-4 col-sm-4 col-xs-12">
    <div class="inner-box">
        <div class="mask-menu">
            <ul class="images ">
                <li class="display-inline" ng-repeat="tableImage in allTableImages">
                    <a href="" ng-click="showTableImage(tableImage.url)"><img ng-src="{{tableImage.url}}" width="600" height="400" /></a>
                </li>
            </ul>
        </div>
        <ul class="triggers-menu slider-btn">
            <li ng-repeat="cnt in tablemapcount"></li>
        </ul> 
    </div>
</div>

我怎樣才能做到這一點？

Answer 1

您可以使用<a>標記的href屬性通過哈希符號指向頁面上具有id的元素。

<a href="#tableImagesSliding">Jump to table plans</a>

<div id="tableImagesSliding">
  Table plans div
</div>

有關有效使用href更多信息，您可以閱讀有關a#href和id屬性的 MDN 頁面

---

但是，使用 Angular 時會涉及更多...

Angular 的路由器將參與其中，如果它無法識別路線，則會（可能 - 取決於您的設置）重定向到主路線。

您可以使用$anchorScroll服務讓 Angular 為您跳轉到 div。

您的 HTML 現在包含一個ng-click ，並且控制器使用$anchorScroll ：

 angular.module('so42186303', []) .controller('so42186303Ctrl', ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) { $scope.showTablePlans = function() { $location.hash('tableImagesSliding'); $anchorScroll(); }; }]);

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="so42186303"> <div ng-controller="so42186303Ctrl"> <a ng-click="showTablePlans()">Click to jump to table plans</a> <div style="height: 100vh; margin-top: 20px;">Content to jump past</div> <div id="tableImagesSliding" style="height: 100vh;"> Table plans </div> </div> </div>

Answer 2

如果通過調用您的意思是 scoll 到 div 的位置，那么答案將是

<a href="#tableImagesSliding"> </a>