使用 javascript 创建链接答案

【问题标题】：Create the links using javascript使用 javascript 创建链接
【发布时间】：2019-11-07 10:36:31
【问题描述】：

我有一个已实现的 boostrap 4 导航栏，并且有一个创建链接的功能。它可以工作，并且有任何有效的方法可以在 javascript 中执行。我有三个函数为每个超链接创建链接。是否可以使用 cookie 或使用 javascript 的任何其他有效方法

<script>
  function setAboutLink(lang){
    var url = lang+"/aboutus";  // will be xyz.com/en/aboutus
    window.location.href= url; 
  }
  function setContactLink(lang){
    var url = lang+"/contact"; // will be xyz.com/en/contact
    window.location.href= url;
  }
  function setListLink(lang){
    var url = lang+"/list"; // will be xyz.com/en/list
    window.location.href= url;
  }

</script>

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top pb-0">
    <a class="navbar-brand" href="/"+selectedLanguageName><img src="/images/logo.png" alt="" class="logoC mr-4"
            style="max-width: 100px"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="javascript:" onclick="setAboutLink(window.location.href)"
                   >About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:" onclick="setContactLink(window.location.href)"
                    >Contact Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:" onclick="setListLink(window.location.href)"
                   >List</a>
            </li>
        </ul>       
    </div>
</nav>

【问题讨论】：

您可以使用localStorage 或sessionStorage。
你可以通过设置一个全局的lang变量const lang = window.location.href;来简化你的代码，并有1个方法生成链接，比如function setLink(page) { var url = lang+page; window.location.href = url; }，然后从你的DOM中调用它，比如setLink('/contact')

标签： javascript css hyperlink bootstrap-4 html5-canvas

【解决方案1】：

不知道为什么会出现cookie，这里只需要高效的方法，可以写一个通用的函数，整个网站都可以用。

function redirection(slang){
   window.location.href = window.location.href + '/' + slang
 }

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top pb-0">
    <a class="navbar-brand" href="/"+selectedLanguageName><img src="/images/logo.png" alt="" class="logoC mr-4"
            style="max-width: 100px"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="JavaScript:Void(0)" onclick="redirection('aboutus')" >About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="JavaScript:Void(0)" onclick="redirection('contact')"
                    >Contact Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="JavaScript:Void(0)" onclick="redirection('list')"
                   >List</a>
            </li>
        </ul>       
    </div>
</nav>

【讨论】：

【解决方案2】：

<script>
  var lang = 'en'; // default is en
  if (localStorage.getItem('lang') === null){
    localStorage.setItem('lang', 'ch'); // tou can have any condition for lang and set it here
  } else {
    localStorage.getItem('lang')
  }

  function setLink(path){
    // if lang var is there in localStorage lang var is ch otherwise en
    var url = window.location.origin + '/' + lang + '/' + path
    window.location.href= url;
  }

</script>

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top pb-0">
    <a class="navbar-brand" href="/"+selectedLanguageName><img src="/images/logo.png" alt="" class="logoC mr-4"
            style="max-width: 100px"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="javascript:" onclick="setAboutLink('aboutus')"
                   >About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:" onclick="setLink('contactus')"
                    >Contact Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:" onclick="setLink('list')"
                   >List</a>
            </li>
        </ul>       
    </div>
</nav>

我在你的脚本的第一个写 localStorage。如果 localStorage lang var 不存在，则将 localStorage lang var 设置为 ch，否则第一次为 localStorage 中的用户设置它。如果 localStorage 不存在，则默认 lang 为 en。

【讨论】：