Переходы и действия onClick в меню Semantic UI не работают - PullRequest
Новая
       10

Переходы и действия onClick в меню Semantic UI не работают

0 голосов
/ 27 августа 2018

Это очень сильно связано с вопросом

Я новичок в веб-разработке, очень стараюсь, смотрю видео на YouTube / Udemy / StackOverflow для ответов .. Не уверен, что это дубликат ..

Я выбрал код для написания меню по этой ссылке

У меня есть этот HTML, и у меня есть два CDN (один в head и .js в body, как видно из видео на YouTube. К сожалению .. Нет переходов, действия при наведении, как я вижу, на веб-сайте Semantic UI. 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
    <title></title>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
    <div class="ui grid">
      <div class="four wide column">
        <div class="ui vertical fluid tabular menu">
          <a class="active item">
            Bio
          </a>
          <a class="item">
            Pics
          </a>
          <a class="item">
            Companies
          </a>
          <a class="item">
            Links
          </a>
        </div>
      </div>
      <div class="twelve wide stretched column">
        <div class="ui segment">
          This is an stretched grid column. This segment will always match the tab height
        </div>
      </div>
    </div>
  </body>
</html>

  1. Я хотел бы получить более подробное объяснение того, какие другие CDN мне нужны, или какие файлы JQuery, JavaScript, CSS мне нужны, чтобы эти переходы работали ..

  2. Есть ли страница, на которую я захожу, которая объясняет это? Я знаю очень простой JavaScript и понял, что не было функции, которая бы выполняла все эти действия.

1 Ответ

0 голосов
/ 31 августа 2018

Семантический пользовательский интерфейс сильно зависит от JQuery, поэтому, если вы хотите, чтобы он работал (в части JavaScript), вы должны сначала добавить Jquery JS-файлы, а затем Semantic UI JS-файлы, как указано в Get Started страница семантического интерфейса. В качестве хорошей практики всегда добавляйте файлы JS внизу HTML, прямо перед закрывающим тегом body.

Вот ваш код с JQuery и Semantic UI: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
    <title></title>
  </head>
  <body>
    <div class="ui grid">
      <div class="four wide column">
        <div class="ui vertical fluid tabular menu">
          <a class="active item">
            Bio
          </a>
          <a class="item">
            Pics
          </a>
          <a class="item">
            Companies
          </a>
          <a class="item">
            Links
          </a>
        </div>
      </div>
      <div class="twelve wide stretched column">
        <div class="ui segment">
          This is an stretched grid column. This segment will always match the tab height
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
  </body>
</html>

Чтобы использовать Переход в качестве модуля семантического пользовательского интерфейса, вы должны вызывать их, используя JQuery, как в примерах.

Я рекомендую вам усвоить больше в JQuery перед изучением Semantic UI, главным образом потому, что с использованием его компонентов и модулей все связано. Посетите Learn JQuery веб-страницу и CSS Tricks видеоуроки. После этого углубитесь в Semantic UI, прочитав документацию со всеми их разделами, например, модуль Dropdown имеет четыре раздела: определение, примеры, использование и настройки.

Кроме того, просмотр этого видео « Semantic UI за 60 минут » на Youtube может быть полезным, чтобы лучше узнать, как работает Semantic UI.

Надеюсь, это поможет.

...