Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > Общие вопросы Web
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 23.08.2019, 15:18   #1
winers
Новичок
Джуниор
 
Регистрация: 23.08.2019
Сообщений: 6
По умолчанию [РЕШЕНО][JavaScript] Подскажите пожалуйста почему не открывается меню!

Решение: https://programmersforum.ru/showpost...18&postcount=8

Здравствуйте, проблема следующая пытаюсь разобраться в чужом коде (есть значит рабочий сайт, с навигационным меню в виде гамбургера, там пять подпунктов меню" о нас, про вас , спецназ и т.д." так вот переход между этими пунктами реализован как я понимаю средствами js. при переходе по пунктам плавно меняется содержание сайта при этом фон остается неизменным, а меняется HTML код на соответствующий своему пункту меню. Самая фишка в том , что этот HTML весь написан в одном файле index.html. То есть на каждый пункт меню нет отдельного html файла с сылкой на него!)
Вопрос как это реализуется???
У меня есть полностью код данного сайта, но у меня почему то не переходит на нужное меню, а просто возвращает на главную и все! ( даже если в html указать ссылку на другой html файл, все равно возвращает на главную).

вот фрагмент js кода отвечающий за открытие меню как я понял?
может тут что-то не так?
Код:
// fire
        // fire home
        $("#fire-home").on("click", function(e) {
            e.preventDefault();
            $(".current").fadeOut(1200, function() {
                $(".upper-page").fadeIn(2200);
                $(".current").removeClass("current");
                $(".upper-page").addClass("current");
            });
        });
        // fire about
        $("#fire-about").on("click", function(e) {
            e.preventDefault();
            $(".current").fadeOut(1200, function() {
                $("#about").fadeIn(2200);
                $(".current").removeClass("current");
                $("#about").addClass("current");
            });
        });
        // fire services
        $("#fire-services").on("click", function(e) {
            e.preventDefault();
            $(".current").fadeOut(1200, function() {
                $("#services").fadeIn(2200);
                $(".current").removeClass("current");
                $("#services").addClass("current");
            });
        });
        // fire contact
        $("#fire-contact").on("click", function(e) {
            e.preventDefault();
            $(".current").fadeOut(1200, function() {
                $("#contact").fadeIn(2200);
                $(".current").removeClass("current");
                $("#contact").addClass("current");
            });
        });
______________________
Форматируйте код и используйте тег [CODE] (кнопка [CODE] в форме сообщения) при вставке кода на форум. Подробнее в FAQ

Последний раз редактировалось Вадим Мошев; 23.08.2019 в 21:39.
winers вне форума Ответить с цитированием
Старый 23.08.2019, 16:43   #2
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Цитата:
Сообщение от winers Посмотреть сообщение
Вопрос как это реализуется???
насколько я могу судить по представленному коду, нужное содержание в HTML подсвечивается через задание тому, что нужно высветить класса current
скорее всего в стилях задано для этого класса видимость.
если класс current[/B] убирается - то содержимое исчезает.

анимация плавного перехода сделана через fadeOut() и fadeIn()

расставьте у себя в коде содержимому нужный класс upper-page,
задайте соответствующим блокам нужные ID
например,
id="about"
id="services"
id="contact"
Serge_Bliznykov вне форума Ответить с цитированием
Старый 23.08.2019, 16:51   #3
winers
Новичок
Джуниор
 
Регистрация: 23.08.2019
Сообщений: 6
По умолчанию

Код:
 <nav role="navigation">
            <ul class="main-nav brackets">
                <li>
                    <a class="menu-state active" href="#" id="fire-home">Home</a>
                </li>
                <li>
                    <a class="menu-state" href="#" id="fire-about">About</a>
                </li>
                <li>
                    <a class="menu-state" href="#" id="fire-services">Services</a>
                </li>
                <li>
                    <a class="menu-state" href="#" id="fire-contact">Contact</a>
                </li>
            </ul>
        </nav><!-- navigation end -->



        <!-- about start -->
        <div class="lower-page" id="about">
            <!-- center container start -->
            <div class="center-container">
                <!-- center block start -->
                <div class="center-block">
                    <!-- lower content start -->
                    <div class="lower-content">
                        <!-- container start -->
                        <div class="container sections">
                            <!-- row start -->
                            <div class="row about-column">
                                <div class="col-md-3">
                                    <div class="cycle-it">
                                        <a class="cycle-text" href="#">Who we are</a>
                                    </div>
                                    <h2>
                                        About
                                    </h2>
                                </div>
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <div class="quote">
                                        <p>
                                            <span class="quote-mark-l fa fa-quote-left"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum pharetra congue.<span class=
                                            "quote-mark-r fa fa-quote-right"></span>
                                        </p>
                                    </div>
                                </div>
                            </div><!-- row end -->
                            <!-- row start -->
                            <div class="row">
                                <!-- decoration start -->
                                <div class="decoration">
                                    <div class="decoration-left"></div>
                                    <div class="decoration-effect">
                                        <a class="effect-bubba" href="#">Read more</a>
                                    </div>
                                    <div class="decoration-right"></div>
                                </div><!-- decoration end -->
                            </div><!-- row end -->
                            <!-- row start -->
                            <div class="row about-column">
                                <div class="col-md-4">
                                    <!-- skills start -->
                                    <div class="contentOT">
                                        <div class="colOT">
                                            <ul id="skills">
                                                <li>
                                                    <span class="expand html5"></span><em>HTML5</em>
                                                </li>
                                                <li>
                                                    <span class="expand css3"></span><em>CSS3</em>
                                                </li>
                                                <li>
                                                    <span class="expand jquery"></span><em>jQuery</em>
                                                </li>
                                                <li>
                                                    <span class="expand photoshop"></span><em>Photoshop</em>
                                                </li>
                                                <li>
                                                    <span class="expand dreamweaver"></span><em>Dreamweaver</em>
                                                </li>
                                            </ul>
                                        </div>
                                    </div><!-- skills end -->
                                </div>
                                <div class="col-md-4">
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum <a href="#">pharetra congue</a>.
                                    </p>
                                    <p>
                                        Suspendisse ut feugiat orci, in laoreet augue. Aliquam ultricies, ligula non dignissim suscipit, neque nunc efficitur felis.
                                    </p>
                                </div>
                                <div class="col-md-4">
                                    <p>
                                        Curabitur sit amet odio vitae odio gravida tempus. Aenean in lectus neque.
                                    </p>
                                    <p>
                                        Nunc in lacus quis enim ultrices suscipit sit amet id lorem. Sed in lorem felis. Nulla tempus consequat magna, eu <a href="#">finibus mauris</a>.
                                    </p>
                                </div>
                            </div><!-- row end -->
                        </div><!-- container end -->
                    </div><!-- lower content end -->
                </div><!-- center container end -->
            </div><!-- center block end -->
        </div><!-- about end -->

Последний раз редактировалось winers; 23.08.2019 в 17:00.
winers вне форума Ответить с цитированием
Старый 23.08.2019, 16:55   #4
winers
Новичок
Джуниор
 
Регистрация: 23.08.2019
Сообщений: 6
По умолчанию

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
насколько я могу судить по представленному коду, нужное содержание в HTML подсвечивается через задание тому, что нужно высветить класса current
скорее всего в стилях задано для этого класса видимость.
если класс current[/B] убирается - то содержимое исчезает.

анимация плавного перехода сделана через fadeOut() и fadeIn()

расставьте у себя в коде содержимому нужный класс upper-page,
задайте соответствующим блокам нужные ID
например,
id="about"
id="services"
id="contact"
id соответствующие есть, но контент не меняется при переходе по ссылке все равно(
winers вне форума Ответить с цитированием
Старый 23.08.2019, 17:08   #5
winers
Новичок
Джуниор
 
Регистрация: 23.08.2019
Сообщений: 6
По умолчанию

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
насколько я могу судить по представленному коду, нужное содержание в HTML подсвечивается через задание тому, что нужно высветить класса current
скорее всего в стилях задано для этого класса видимость.
если класс current[/B] убирается - то содержимое исчезает.

анимация плавного перехода сделана через fadeOut() и fadeIn()

расставьте у себя в коде содержимому нужный класс upper-page,
задайте соответствующим блокам нужные ID
например,
id="about"
id="services"
id="contact"
Всё правильно! при нажатии по определенному пункту меню содержимое старой ссылки плавно исчезает и появляется содержимое соответствующей ссылки. Но в моем случае закрывается просто открытое бургер меню и больше ничего не происходит. хотя по идее должно исчезнуть старое и появиться новое)
Спасибо и на этом!)
winers вне форума Ответить с цитированием
Старый 23.08.2019, 17:25   #6
winers
Новичок
Джуниор
 
Регистрация: 23.08.2019
Сообщений: 6
По умолчанию

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
насколько я могу судить по представленному коду, нужное содержание в HTML подсвечивается через задание тому, что нужно высветить класса current
скорее всего в стилях задано для этого класса видимость.
если класс current[/B] убирается - то содержимое исчезает.

анимация плавного перехода сделана через fadeOut() и fadeIn()

расставьте у себя в коде содержимому нужный класс upper-page,
задайте соответствующим блокам нужные ID
например,
id="about"
id="services"
id="contact"
сейчас пересмотрев опять код обнаружил, что для класса current в стилях абсолютно ничего не прописано! Может в этом и есть проблема?
winers вне форума Ответить с цитированием
Старый 23.08.2019, 17:56   #7
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Вы меня или не слышите или не понимаете.


ладно. попробуйте сохранить этот код и поиграться с ним.

Код:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test Move Options</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<style>
.lower-page{
    display:none;
}
.current{
    display:block;
}

</style>
<script>
	$(function () {

         $(".upper-page").addClass("current");

// fire
        // fire home
        $("#fire-home").on("click", function(e) {
            e.preventDefault();
            $(".current").fadeOut(1200, function() {
                $(".upper-page").fadeIn(2200);
                $(".current").removeClass("current");
                $(".upper-page").addClass("current");
            });
        });
        // fire about
        $("#fire-about").on("click", function(e) {
            e.preventDefault();
            $(".current").fadeOut(1200, function() {
                $("#about").fadeIn(2200);
                $(".current").removeClass("current");
                $("#about").addClass("current");
            });
        });
        // fire services
        $("#fire-services").on("click", function(e) {
            e.preventDefault();
            $(".current").fadeOut(1200, function() {
                $("#services").fadeIn(2200);
                $(".current").removeClass("current");
                $("#services").addClass("current");
            });
        });
        // fire contact
        $("#fire-contact").on("click", function(e) {
            e.preventDefault();
            $(".current").fadeOut(1200, function() {
                $("#contact").fadeIn(2200);
                $(".current").removeClass("current");
                $("#contact").addClass("current");
            });
        });
	});
</script>

</head>
<body>

 <nav role="navigation">
            <ul class="main-nav brackets">
                <li>
                    <a class="menu-state active" href="#" id="fire-home">Home</a>
                </li>
                <li>
                    <a class="menu-state" href="#" id="fire-about">About</a>
                </li>
                <li>
                    <a class="menu-state" href="#" id="fire-services">Services</a>
                </li>
                <li>
                    <a class="menu-state" href="#" id="fire-contact">Contact</a>
                </li>
            </ul>
</nav><!-- navigation end -->


        <div class="upper-page">
            This Home page content!
        </div >

        <!-- about start -->
        <div class="lower-page" id="about">
            <!-- center container start -->
            <div class="center-container">
                <!-- center block start -->
                <div class="center-block">
                    <!-- lower content start -->
                    <div class="lower-content">
                        <!-- container start -->
                        <div class="container sections">
                            <!-- row start -->
                            <div class="row about-column">
                                <div class="col-md-3">
                                    <div class="cycle-it">
                                        <a class="cycle-text" href="#">Who we are</a>
                                    </div>
                                    <h2>
                                        About
                                    </h2>
                                </div>
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <div class="quote">
                                        <p>
                                            <span class="quote-mark-l fa fa-quote-left"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum pharetra congue.<span class=
                                            "quote-mark-r fa fa-quote-right"></span>
                                        </p>
                                    </div>
                                </div>
                            </div><!-- row end -->
                            <!-- row start -->
                            <!-- row start -->
                        </div><!-- container end -->
                    </div><!-- lower content end -->
                </div><!-- center container end -->
            </div><!-- center block end -->
        </div><!-- about end -->


        <div class="lower-page" id="contact">
            <p>My telephone: +720390099311</p>
        </div>

        <div class="lower-page" id="services">
            <h1>Serviceses HERE</h1>
	    <span class="quote-mark-l fa fa-quote-left"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum pharetra congue.
	</div>

        <div class="upper-page">
            This Home page also!
        </div >
</body>
</html>
Serge_Bliznykov вне форума Ответить с цитированием
Старый 23.08.2019, 18:30   #8
winers
Новичок
Джуниор
 
Регистрация: 23.08.2019
Сообщений: 6
По умолчанию

✔ Этот пост помечен как решение ✔


Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
Вы меня или не слышите или не понимаете.


ладно. попробуйте сохранить этот код и поиграться с ним.

Код:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test Move Options</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<style>
.lower-page{
    display:none;
}
.current{
    display:block;
}

</style>
<script>
	$(function () {

         $(".upper-page").addClass("current");

// fire
        // fire home
        $("#fire-home").on("click", function(e) {
            e.preventDefault();
            $(".current").fadeOut(1200, function() {
                $(".upper-page").fadeIn(2200);
                $(".current").removeClass("current");
                $(".upper-page").addClass("current");
            });
        });
        // fire about
        $("#fire-about").on("click", function(e) {
            e.preventDefault();
            $(".current").fadeOut(1200, function() {
                $("#about").fadeIn(2200);
                $(".current").removeClass("current");
                $("#about").addClass("current");
            });
        });
        // fire services
        $("#fire-services").on("click", function(e) {
            e.preventDefault();
            $(".current").fadeOut(1200, function() {
                $("#services").fadeIn(2200);
                $(".current").removeClass("current");
                $("#services").addClass("current");
            });
        });
        // fire contact
        $("#fire-contact").on("click", function(e) {
            e.preventDefault();
            $(".current").fadeOut(1200, function() {
                $("#contact").fadeIn(2200);
                $(".current").removeClass("current");
                $("#contact").addClass("current");
            });
        });
	});
</script>

</head>
<body>

 <nav role="navigation">
            <ul class="main-nav brackets">
                <li>
                    <a class="menu-state active" href="#" id="fire-home">Home</a>
                </li>
                <li>
                    <a class="menu-state" href="#" id="fire-about">About</a>
                </li>
                <li>
                    <a class="menu-state" href="#" id="fire-services">Services</a>
                </li>
                <li>
                    <a class="menu-state" href="#" id="fire-contact">Contact</a>
                </li>
            </ul>
</nav><!-- navigation end -->


        <div class="upper-page">
            This Home page content!
        </div >

        <!-- about start -->
        <div class="lower-page" id="about">
            <!-- center container start -->
            <div class="center-container">
                <!-- center block start -->
                <div class="center-block">
                    <!-- lower content start -->
                    <div class="lower-content">
                        <!-- container start -->
                        <div class="container sections">
                            <!-- row start -->
                            <div class="row about-column">
                                <div class="col-md-3">
                                    <div class="cycle-it">
                                        <a class="cycle-text" href="#">Who we are</a>
                                    </div>
                                    <h2>
                                        About
                                    </h2>
                                </div>
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <div class="quote">
                                        <p>
                                            <span class="quote-mark-l fa fa-quote-left"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum pharetra congue.<span class=
                                            "quote-mark-r fa fa-quote-right"></span>
                                        </p>
                                    </div>
                                </div>
                            </div><!-- row end -->
                            <!-- row start -->
                            <!-- row start -->
                        </div><!-- container end -->
                    </div><!-- lower content end -->
                </div><!-- center container end -->
            </div><!-- center block end -->
        </div><!-- about end -->


        <div class="lower-page" id="contact">
            <p>My telephone: +720390099311</p>
        </div>

        <div class="lower-page" id="services">
            <h1>Serviceses HERE</h1>
	    <span class="quote-mark-l fa fa-quote-left"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum pharetra congue.
	</div>

        <div class="upper-page">
            This Home page also!
        </div >
</body>
</html>
Спасибо большое!)
проблема была в том что в моем коде js не было данной строчки
Код:
	$(function () {

         $(".upper-page").addClass("current");

Последний раз редактировалось Вадим Мошев; 23.08.2019 в 21:38.
winers вне форума Ответить с цитированием
Старый 23.08.2019, 19:24   #9
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Цитата:
Сообщение от winers Посмотреть сообщение
Спасибо большое!)
На здоровье!
Serge_Bliznykov вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
[РЕШЕНО] добавьте пожалуйста в меню Мои темы а то после создание очень трудно найти свои созданные ТЕМЫ falsebegin О форуме и сайтах клуба 67 06.06.2019 14:31
Подскажите, пожалуйста , книги по javascript Gamardgoba JavaScript, Ajax 4 18.07.2018 22:38
[РЕШЕНО]: Почему не работает цикл for на javaScript. Shvarcengold Помощь студентам 2 07.03.2017 15:24
Почему результа sql(ADOquery)т выдает минус значении? Подскажите пожалуйста! Shingis БД в Delphi 4 25.05.2015 15:53
Подскажите пожалуйста почему добавляется всего одна буква из трех? Nata Golden rose Общие вопросы C/C++ 2 22.05.2014 05:29