This is a mobile optimized page that loads fast, if you want to load the real page, click this text.

Вопрос Подскажите как подключить переход между блоками в одном меню без перезагрузки страницы на другую.

745164nk

Специалист
Автор темы
17 Сен 2020
104
15
79
Сделал вот такой код но чет не получается его сделать в блоки. Получается в итоге что все на одной странице. Заранее огромное спасибо


Код: 
<body>
<div>
  <UL>
   <li class="var_nav" v-if="page == 1">
      <div class="link_bg"></div>
      <div class="link_title">
        <div class=icon>
        <i><img src="img/commands.png"></i>
        </div>
        <a href="#"><span>Команды</span></a>
      </div>
   </li>
   <li class="var_nav">
      <div class="link_bg"></div>
      <div class="link_title">
        <div class=icon>
        <i><img src="img/rules.png"></i>
        </div>
        <a href="#"><span>Правила</span></a>
      </div>
   </li>
   <li class="var_nav">
      <div class="link_bg"></div>
      <div class="link_title">
        <div class=icon>
        <i><img src="img/setings.png"></i>
        </div>
        <a href="#"><span>Настройки</span></a>
      </div>
   </li>
  </UL>
</div>
</div>


<div class="container" v-if="active">
  <div>
    <div class="wrap" v-if="page == 0"></div>
    <div class="informBlock">
      <h5 class="mainText">Правила</h5>
      <div class="underlineBlock"></div>
      <p class="secondText">ОБЩИЕ ПРАВИЛА</p> <a href="prav.html" class="c">Открыть</a>
      <p class="secondText">ПРАВИЛА ОБЩЕНИЯ</p> <a href="prav1.html" class="c">Открыть</a>
      <p class="secondText">ПРАВИЛА ВЗАИМОДЕЙСТВИЯ С АДМИНИСТРАЦИЕЙ</p> <a href="prav2.html" class="c">Открыть</a>
      <p class="secondText">ПРАВИЛА ПОЛЬЗОВАНИЯ ИГРОВЫМИ АККАУНТАМИ</p> <a href="prav3.html" class="c">Открыть</a>
      <p class="secondText">ТЕРМИНЫ И ИХ ОПИСАНИЕ</p> <a href="prav4.html" class="c">Открыть</a>
    </div>
  </div>

</body>

 

X-Clusiv

Модератор
Команда форума
high coder
4 Окт 2020
583
276
161
29
vue файл скиньте.
 

X-Clusiv

Модератор
Команда форума
high coder
4 Окт 2020
583
276
161
29
И он даже не подключен здесь, на сколько я вижу, поэтому и не работает)
 

745164nk

Специалист
Автор темы
17 Сен 2020
104
15
79
X-Clusiv написал(а):
И он даже не подключен здесь, на сколько я вижу, поэтому и не работает)
Нажмите для раскрытия...
Код: 
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Main</title>
    <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css'>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/donates.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  <style>
    .c {
color:  rgba(255, 255, 255, 0.65);
}
.c:hover {
color:  rgb(255, 255, 255);
text-decoration: none;
}

.st {
display: inline-block;
width: 300px;
height: 70px;
border-radius: 2px;
margin-left: -70px;
margin-top: 0px;
}
</style>
</head>
<body>

  <div v-if="active">
      <div class="wrap" v-if="page == 0"></div>
      <div class="informBlock">
        <h5 class="mainText">Правила</h5>
        <div class="underlineBlock"></div>
        <p class="secondText">ОБЩИЕ ПРАВИЛА</p> <a href="prav.html" class="c">Открыть</a>
        <p class="secondText">ПРАВИЛА ОБЩЕНИЯ</p> <a href="prav1.html" class="c">Открыть</a>
        <p class="secondText">ПРАВИЛА ВЗАИМОДЕЙСТВИЯ С АДМИНИСТРАЦИЕЙ</p> <a href="prav2.html" class="c">Открыть</a>
        <p class="secondText">ПРАВИЛА ПОЛЬЗОВАНИЯ ИГРОВЫМИ АККАУНТАМИ</p> <a href="prav3.html" class="c">Открыть</a>
        <p class="secondText">ТЕРМИНЫ И ИХ ОПИСАНИЕ</p> <a href="prav4.html" class="c">Открыть</a>
      </div>
  </div>


<div v-if="page == 1">
  <UL>
   <li class="var_nav">
      <div class="link_bg"></div>
      <div class="link_title">
        <div class=icon>
        <i><img src="img/commands.png"></i>
        </div>
        <a href="#"><span>Команды</span></a>
      </div>
   </li>
   <li class="var_nav">
      <div class="link_bg"></div>
      <div class="link_title">
        <div class=icon>
        <i><img src="img/rules.png"></i>
        </div>
        <a href="#"><span>Правила</span></a>
      </div>
   </li>
   <li class="var_nav">
      <div class="link_bg"></div>
      <div class="link_title">
        <div class=icon>
        <i><img src="img/setings.png"></i>
        </div>
        <a href="#"><span>Настройки</span></a>
      </div>
   </li>
  </UL>
</div>

</body>
</html>

Вот, показывает две страницы в одном файле а должен показывать большой когда нажал на кнопку снизу справа
 

X-Clusiv

Модератор
Команда форума
high coder
4 Окт 2020
583
276
161
29
У вас не создан vue компонент. (new Vue)
 

X-Clusiv

Модератор
Команда форума
high coder
4 Окт 2020
583
276
161
29

729134 - PlayCode

Try this online playground with instant live preview and console. Easy & Fast. Experiment yourself.
playcode.io
 

X-Clusiv

Модератор
Команда форума
high coder
4 Окт 2020
583
276
161
29
Стилей ваших нет поэтому все не стилизовано, но кликабельно.
 

745164nk

Специалист
Автор темы
17 Сен 2020
104
15
79
Спасибо Дальнейшие действия вроде как понял
 
Ответить в теме
Меню
Вход
Регистрация