[РЕШЕНО][JavaScript] Подскажите пожалуйста почему не открывается меню!

[winers]

Решение: 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

[Serge_Bliznykov]

Сообщение от winers

Вопрос как это реализуется???

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

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

расставьте у себя в коде содержимому нужный класс upper-page,
задайте соответствующим блокам нужные ID
например,
id="about"
id="services"
id="contact"

[winers]

 <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]

Сообщение от Serge_Bliznykov

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

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

расставьте у себя в коде содержимому нужный класс upper-page,
задайте соответствующим блокам нужные ID
например,
id="about"
id="services"
id="contact"

id соответствующие есть, но контент не меняется при переходе по ссылке все равно(

[winers]

Сообщение от Serge_Bliznykov

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

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

расставьте у себя в коде содержимому нужный класс upper-page,
задайте соответствующим блокам нужные ID
например,
id="about"
id="services"
id="contact"

Всё правильно! при нажатии по определенному пункту меню содержимое старой ссылки плавно исчезает и появляется содержимое соответствующей ссылки. Но в моем случае закрывается просто открытое бургер меню и больше ничего не происходит. хотя по идее должно исчезнуть старое и появиться новое)
Спасибо и на этом!)

[winers]

Сообщение от Serge_Bliznykov

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

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

расставьте у себя в коде содержимому нужный класс upper-page,
задайте соответствующим блокам нужные ID
например,
id="about"
id="services"
id="contact"

сейчас пересмотрев опять код обнаружил, что для класса current в стилях абсолютно ничего не прописано! Может в этом и есть проблема?

[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>

[winers]

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

Сообщение от 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");

[Serge_Bliznykov]

Сообщение от winers

Спасибо большое!)

На здоровье!