Question

我有一个实现的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>

Answer 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>

Answer 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，则使用ch设置localStorage lang var，否则，第一次在localStorage中为用户设置它。如果localStorage不存在，则默认lang为en。

使用javascript创建链接

2 个答案: