Создайте ссылки, используя JavaScript - PullRequest
Новая
       11

Создайте ссылки, используя JavaScript

0 голосов
/ 25 июня 2019

У меня есть встроенная навигационная панель boostrap 4, и у меня есть функция, которая создает ссылки. Это работает, и есть ли эффективный способ сделать в JavaScript. У меня есть три функции, которые создают ссылки для каждой гиперссылки. Можно ли сделать с помощью куки или любой другой эффективный метод, используя 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>

Ответы [ 2 ]

0 голосов
/ 25 июня 2019 
<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 не существует, по умолчанию используется язык en.

0 голосов
/ 25 июня 2019

Я не знаю, почему 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>
...