如何点击标题中的链接，然后返回HTML、Javascript和CSS

How to click on a link from the header and then go back with HTML, Javascript and CSS?

本文关键字：HTML 返回 Javascript CSS 然后 标题 何点击 链接      更新时间：2023-09-26

解决方案：没有。我甚至不知道我为什么要问这个问题，它完全没有意义！我知道为什么我的频道可以关闭：（.

首先，我的网站有一个带有不同符号的标题，我也会将其链接起来。

以下是我想要完成的步骤：

  1. 点击"主页"中标题"联系人"内的特定按钮
  2. 转到"联系人"
  3. 然后单击"联系人"返回"主页"

我遇到的问题是，导航栏也必须复制到我链接的每个文件中。我该如何防止这种情况发生？

我不知道如何编码，有人能帮我吗？

如果你只愿意使用html，css&javascript来修复它，那么也许你可以通过使用angularjs来实现这一点，angular js是一个javascript框架，可以解决你的问题。您创建了带有所有导航链接的index.html，并在index.html中加载外部链接.html文件我为您创建了一个示例：

http://codepen.io/Edrees21/pen/OPaYVv

<body ng-app="NavigationMenu">
    <div class="container" ng-controller="NavigationController">
        <ul class="nav-menu">
            <li ng-repeat="item in navigationItems"
                    ng-class="{active:isActivePage(item.url)}"
                    ng-click="onItemClick(item)">
                {{item.name}}
            </li>
        </ul>
        <div class="content">
            <div ng-include="currentPage"></div>
        </div>
    </div>
    <script type="text/ng-template" id="your-first-html-file.html">
        <h4>About us</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    </script>
    <script type="text/ng-template" id="your-second-html-file.html">
        <h4>Links</h4>
        <ul>
            <li>some link</li>
            <li>some link</li>
            <li>some link</li>
        </ul>
    </script>
    <script type="text/ng-template" id="your-third-html-file.html">
        <h4>Contact</h4>
        <p>John Doe</p>
        <p>Long Avenue</p>
        <p>1234567890</p>
    </script>
</body>

Javascript：

angular.module('NavigationMenu', [])
.controller('NavigationController', ['$scope', function ($scope) {
    $scope.navigationItems = [{
        name: 'About us',
        url: 'your-first-html-file.html'
    }, 
    {
        name: 'Links',
        url: 'your-second-html-file.html'
    }, 
  {
        name: 'Contact',
        url: 'your-third-html-file.html'
    }];
    $scope.currentPage = 'your-first-html-file.html';
    $scope.onItemClick = function (item) {
        $scope.currentPage = item.url;
    }
    $scope.isActivePage = function (pageUrl) {
        return pageUrl == $scope.currentPage;
    }
}]);

据我所知，除非您使用服务器端编程语言，否则您必须将链接复制到所有页面。如果您使用像PHP这样的编程语言，您可以为导航栏创建一个文件，然后将其包含在其他页面中。

相关文章：