1. Вы находитесь в сообществе Rubukkit. Мы - администраторы серверов Minecraft, разрабатываем собственные плагины и переводим на различные языки плагины наших коллег из других стран.
    Скрыть объявление
Скрыть объявление
В преддверии глобального обновления, мы проводим исследования, которые помогут нам сделать опыт пользования форумом ещё удобнее. Помогите нам, примите участие!

Одностраничный сайт (смена содержимого блоков)

Тема в разделе "Оффтопик", создана пользователем W_0rld, 27 янв 2016.

Страница 1 из 2
  1. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    Всем привет. Написал за час вот такой сайтик: https://jsfiddle.net/34ckkofw/1/
    HTML:
    <!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <title>CS:GO Only - сервера</title>
      <link href="css/update.css" rel="stylesheet" />
   </head>
   <body style="background: rgba(168, 181, 188, 0.28);">
      <header style="position:fixed">
         <div class="box nav">
            <a href="index.html" class="logo" onclick="location.hash = '#Главная'"></a>
            <a target="content" href="pages/cabinet.html" class="button auth">Личный кабинет</a>
            <ul class="navmenu">
               <li><a target="content" href="pages/news.html">Главная</a></li>
               <li><a target="content" href="pages/servers.html">Сервера</a></li>
               <li><a target="content" href="pages/banlist.html">Банлист</a></li>
               <li><a target="content" href="pages/donate.html">Привелегии</a></li>
            </ul>
         </div>
      </header>
      <div style="padding: 100px;"/>
      <div class="main-container">
         <div class="container">
            <iframe src="pages/news.html" width="100%" height="300px" name="content" allowtransparency></iframe>
         </div>
      </div>
      <div class="main-sidebar">
         <div class="sidebar">
            <div id="title"><span class="center">Мониторинг</span></div>
            <div id="box-sidebar">
               <!-- Код мониторинга -->
            </div>
         </div>
         <div class="sidebar">
            <div id="title"><span class="center">Баннеры</span></div>
            <div id="box-sidebar">
               <!-- Код баннеров -->
            </div>
         </div>
         <div class="sidebar">
            <div id="title"><span class="center">Группа ВК</span></div>
            <div id="box-sidebar">
               <!-- Код группы ВК -->
            </div>
         </div>
      </div>
      <div id="dt" class="box" style="background: #e2e2e2;"></div>
   </body>
</html>
    Код:
    /* Новый код [26.01.16] */
.none {
display: none;
}
.none.active {
display: block;
}
@font-face{
font-family: 'wf_SegoeUILight';
src:url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.eot');
src:url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.eot?#iefix') format('embedded-opentype'),
url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.woff') format('woff'),
url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.ttf') format('truetype'),
url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.svg#web') format('svg');
font-weight: normal;
font-style: normal;
}
.center {
text-align: center;
}
.sidefix {
position: fixed;
right: 8%;
}
.main-container {
position:fixed;
left:0;
width: 80%;
float:left;
}
.main-sidebar {
width: 20%;
float:right;
right:0;
position:fixed;
}
.sidebar {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
text-align: center;
}
img {
width:180px;
height:180px;
}
#img-news {
float:left;
width:180px;
height:180px;
border:2px solid;
margin-top: 9px;
border-color:rgba(117, 117, 117, 0.38);
margin-right: 5px;
}
#date {
color: rgba(239, 251, 176, 0.33);
float:right;
}
#title {
padding: 10px;
background-color: rgb(64, 64, 64);
color: white;
font-size: 16pt;
}
#text-news {
}
#box-news {
background: #fafafa repeat-x 0% 0%;
padding: 9px 20px 120px 20px;
min-height: 100px;
font-size: 15pt;
}
#box-sidebar {
background: #fafafa repeat-x 0% 0%;
padding: 9px 20px 20px 20px;
margin-bottom: 35px;
font-size: 14.5pt;
}
.button:hover {
transition: 1s;
background-color: rgba(255, 255, 255, 0.22);
}
.button {
transition: 2s;
background: none;
background-color: rgba(48, 48, 48, 0.52);
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
}
/* End Update */
/* Старый код */
input { outline: none; }
a, a:hover { text-decoration: none; }
header {
width: 100%;
height: 60px;
position: relative;
background: #292824;
z-index: 99;
text-align: center;
}
.nav .logo {
float: left;
margin-left: 20px;
}
.logo {
width: 190px;
height: 46px;
background: url("../images/logotype.png") no-repeat;
background-size: 190px 46px;
display: inline-block;
margin-top: 8px;
}
.logo:hover {
transition: 2s;
background: url("../images/logotype_hover.png") no-repeat;
}
.auth {
padding: 9px 25px;
position: absolute;
right: 20px;
top: 12px;
font-size: 12px;
color: #fff;
}
.nav ul.navmenu {
margin: 0 auto;
line-height: 56px;
width: 510px;
}
.nav ul.navmenu li {
display: inline-block;
margin: 0 15px;
}
.nav ul.navmenu li a {
font-size: 12px;
font-weight: 300;
color: #fff;
text-transform: uppercase;
width: 100%;
height: 100%;
display: block;
}
.nav ul.navmenu li a:hover {
color: #eccf57;
}
html, body, div, span, applet, object, iframe, h1, sub, sup, h2, h3, h4, h5, h6, blockquote, p, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
text-decoration: none;
vertical-align: baseline;
font-family: "wf_SegoeUILight";
}
    Цель такая, помогите как сделать что-бы при нажатии на ссылку при помощи JS блок появлялся, а предыдущий исчезал. Раньше делал но исходники потерял, а гугл уже не помогает.

    А также вариант каким-то способом сделать что-бы при переходе на ссылку например сайт.ру/сервера открывался именно тот блок который нужен.
     
    W_0rld, 27 янв 2016
    #1
  2. Castiel

    Castiel Активный участник Пользователь

    Баллы:
    93
    Не понял о чем ты, о каких блоках речь? Может AJAX тебе поможет?
     
    Castiel, 27 янв 2016
    #2
  3. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    Согласен не ясно объяснил. Надо что-бы при нажатии на ссылку див <div style="display:none"> появлялся, а если уже появился другой див то сначала он скрывается а потом этот появляется. У меня одностраничный сайт со сменой контента (просто скрытый контент появляется, а предыдущий скрывается.) Я сделал такое на фреймах, но они нагрузку дают, плюс долго грузят.
    Аякс кстати тоже вариант, но если только дадите готовый пример, а то я в нем не разбираюсь. А так без разницы, у меня все будет потом через PHP появляться.
     
    W_0rld, 27 янв 2016
    #3
  4. Castiel

    Castiel Активный участник Пользователь

    Баллы:
    93
    Я конечно индус еще тот, но я бы сделал так:
    предположим есть блоки
    <div id="news" class="block">
    <div id="faq" class="block active">
    есть ссылки
    <a href="#news" data-target="news">
    <a href="#news" data-target="news">
    А потом просто бы брал атрибут target из ссылки, проверял нет ли у блока с таким ID класса active, если нет, то проверял бы есть ли другие блоки с таким классом, если есть - удалял бы и присваивал класс нужному, если есть, то ничего бы не делал.
    Я надеюсь понятно объяснил :D
    Код не напишу, сорян, я этим уже давно не занимаюсь :)
    А вообще юзай jQuery, все предельно просто, открываешь документацию и пишешь, либо ищешь похожие примеры и лепишь так чтобы работало :)
     
    Castiel, 27 янв 2016
    #4
  5. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    Ладно, сделал кое-как. Только одна проблема после одного действия скрытия, второй раз уже не скрывается. Почему я не понимаю. Вот сайт: http://world.saratov-reg.ru/#/Главная
     
    W_0rld, 27 янв 2016
    #5
  6. Beatboxer

    Beatboxer Старожил Пользователь

    Баллы:
    123
    Skype:
    beatbox603
    Т.е. не скрывается? Вроде всё нормально, несколько раз нажимал на кнопки, всё нормально открывается/скрывается
     
    Beatboxer, 28 янв 2016
    #6
  7. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    Перехожу сначала на "сервера", работает (новости пропали), перехожу на новости они появляются, но сервера не продают. Киньте кто-то нормальный скрипт уже яндекс и гугл перерыл, везде старые скрипты, которые я юзать не хочу, тем более половина не работает на новом jquery.
     
    W_0rld, 28 янв 2016
    #7
  8. ImAlive

    ImAlive Старожил Пользователь

    Баллы:
    123
    Skype:
    makcvsdog
    Смотри, у тебя есть class="main-content".
    Ты должен делать так:
    1) Делать запрос к PHP для получения контента, он тебе выдает контент для встраивания в class="main-content".
    2) Полученный контент вставляешь вот так $(".main-content").html(TytContentOtPHP);
     
    ImAlive, 28 янв 2016
    #8
  9. jeckavibal

    jeckavibal Активный участник Пользователь

    Баллы:
    76
    Не проще использовать BootStrap, например?
     
    jeckavibal, 29 янв 2016
    #9
  10. msgroup

    msgroup Старожил Пользователь

    Баллы:
    153
    Skype:
    vladcygankov
    Имя в Minecraft:
    msgroup
    Если помощь еще нужна - отпишите в skype или vk.
     
    msgroup, 29 янв 2016
    #10
  11. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    Ура! Сделал всё-таки, даже лучше чем хотел, загрузка из файла кода, который помещается в див, вот скрипт если вдруг кто-то будет искать:
    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>&#207;&#240;&#232;&#236;&#229;&#240;</title>
<script language="JavaScript" type="text/javascript">
var req;
function processReqChange() {
    if (req.readyState == 4){     
        if (req.status == 200){
            document.getElementById('content').innerHTML=req.responseText;     
        };       
    };
};
function loadXMLDoc(url) { 
    if (window.XMLHttpRequest) {       
        req = new XMLHttpRequest();       
        req.onreadystatechange = processReqChange;       
        req.open("GET", url, true);       
        req.send(null);   
    } else if (window.ActiveXObject) {       
        req = new ActiveXObject("Microsoft.XMLHTTP");       
        if (req) {           
            req.onreadystatechange = processReqChange;
            req.open("GET", url, true);   
            req.send();        
        };  
    };
};
function getFile(url){
    loadXMLDoc(url);  
};   
</script>
</head>
<body>
<a href="#" onclick="getFile('page1.txt')">1</a>
<a href="#" onclick="getFile('page2.txt')">2</a>
<a href="#" onclick="getFile('page3.txt')">3</a>
<div id='content'></div>
</body>
</html>
    Кому интересно: http://world.saratov-reg.ru/
     
    W_0rld, 29 янв 2016
    #11
  12. ImAlive

    ImAlive Старожил Пользователь

    Баллы:
    123
    Skype:
    makcvsdog
    Собственно я это и описал вам, можно было и не париться. Или так важно было использовать именно ванильный JS?

    P.S. Табличка с донатом сделана просто жутко неудобно, быстро сравнивать привилегии при таком построении таблицы почти не возможно.
     
    ImAlive, 29 янв 2016
    #12
  13. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    Эт наброски были, щас уже сделал нормально.
    Последний вопрос: а как сделать на PHP или JS к примеру если адрес сайта "/Сервера", то переменная s-box равняется servers, а если "/Банлист", то banlist? Хочу сделать что-бы при переходе на к примеру сайт.ру/Сервера у меня открывался именно блок серверов, а не как обычно новости. Пока сделал на четырех файлах index1,index2,index3 .php которые работают на реврайт туле .htaccess. но это глупо, легче что-бы был один index.php
     
    W_0rld, 30 янв 2016
    #13
  14. ImAlive

    ImAlive Старожил Пользователь

    Баллы:
    123
    Skype:
    makcvsdog
    Клик
     
    ImAlive, 30 янв 2016
    #14
  15. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    Это я читал, мне пример нужен я в JS полный ноль..
    Как именно получить, и сделать if с сменой текста?
     
    W_0rld, 30 янв 2016
    #15
  16. ImAlive

    ImAlive Старожил Пользователь

    Баллы:
    123
    Skype:
    makcvsdog
    Если хочешь реализовать все без PHP, то создай массив страниц в JS скрипте и при открытии страницы смотри что у тебя в window.location.pathname, потом пробегайся по массиву и ищи соответствия. Нашел соответствие? Выдавай необходимый контент.

    P.S. Вместо .pathname можешь использовать hash, это твой выбор.
     
    ImAlive, 30 янв 2016
    #16
  17. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    А если на PHP, то как? Мне PHP роднее.
     
    W_0rld, 30 янв 2016
    #17
  18. ImAlive

    ImAlive Старожил Пользователь

    Баллы:
    123
    Skype:
    makcvsdog
    $_server["request_uri"] режешь, смотришь что нужно показать и показываешь.
    Все ещё проще чем на JS.
     
    ImAlive, 31 янв 2016
    #18
  19. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    Никто случаем не знает как из STEAMID такого формата: STEAM_1:1:73084906 получить ссылку на профиль? В PHP?
     
    W_0rld, 31 янв 2016
    #19
  20. ImAlive

    ImAlive Старожил Пользователь

    Баллы:
    123
    Skype:
    makcvsdog
    Тут ковыряй
     
    ImAlive, 31 янв 2016
    #20
Страница 1 из 2

Поделиться этой страницей