Делать два меню начиная с двух кнопок в HTML используя язык сценариев JavaScript, [закрывший]

Нужно печатать в том же виде две кнопки, которые, нажав их, покажут меню каждый. Меню, которое покажет каждый, будет отличным. Единственный элемент, который имеют эти два меню, - стиль css.

-5
задан 09.11.2019, 19:29
1 ответ

PodrГ-схвати пытаться с двумя отличными функциями в языке сценариев JavaScript, одной для каждой кнопки, конечная цель которой состояла в том, чтобы печатать в элементе div menГє. Например:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">

    /*Añado un estilo a una clase "menu" para comprobar que no afectará al cambiar de boton cuando se pulsen, es decir, cada vez que se impriman los menus, ambos obtendrán la misma clase*/
    .menu{
       background-color:green;
       color:red;
     }
    </style>


    <script type="text/javascript">
    
        /*Primera funcion para el primer boton*/
        function impMenu1(){
            //Creo un string que contendrá el menu con una clase "menu" en el elemento <ul> para que obtenga los estilos css:
            var stringMenu = `
                            <ul class="menu">
                                <li>Elemento Menu 1</li>
                                <li>Elemento Menu 1</li>
                                <li>Elemento Menu 1</li>
                                <li>Elemento Menu 1</li>
                            </ul>`;
            //Añado ese string al <div> cuyo id es "imprimir"
            document.getElementById("imprimir").innerHTML=stringMenu;
            //De esta manera, javacript inserará en el div vacio del final el menú
        }

        /*Segunda funcion para el primer boton*/
        function impMenu2(){
            //Creo un string que contendrá el menu:
            var stringMenu = `
                            <ul class="menu">
                                <li>Elemento Menu 2</li>
                                <li>Elemento Menu 2</li>
                                <li>Elemento Menu 2</li>
                                <li>Elemento Menu 2</li>
                            </ul>`;
            //Añado ese string al <div> cuyo id es "imprimir"
            document.getElementById("imprimir").innerHTML=stringMenu;
            //De esta manera, javacript inserará en el div vacio del final el menú
        }
    
    
    </script>
</head>
<body>

    <!-- Añado los dos botones -->
    <input type="button" onclick="impMenu1()" id="boton1" value="menu1">
    <input type="button" onclick="impMenu2()" id="boton2" value="menu2">

    <!--Cada boton llama a cada funcion de javascript mas arriba declaradas-->

    <br><br>
    <!-- En el siguiente div se imprimirá el resultado-->
    <div id="imprimir"></div>
    <!-- Cada vez que se pulse un boton, el anterior div se sobreescribirá -->
</body>
</html>

С предыдущим фрагментом кода, каждый раз, когда ты нажал кнопку, функцию sobreescribirГЎ div конца с новым меню. Таким образом, podrГЎs, получать различные меню, не импортируя стиля, который ты используешь, так как ты можешь менять стиль на css и просто издавать это в string.

3
ответ дан 01.12.2019, 12:10
  • 1
    я заношу в список уже тильду как меня ты говоришь, но я не могу прекращаться отрицательный брат – rey.programdor 09.11.2019, 08:44
  • 2
    хороший я объясняю тебе, что у меня есть два меню с теми же стилями css сейчас это, он не вмешивается с решением, которое ты прокомментировал мне.? – rey.programdor 09.11.2019, 18:21
  • 3
    Он не вмешивается, как ты можешь видеть, я издал код, и существую añ dido класс меню в каждое меню, для того, чтобы ты увидел, что несмотря на то, что это два отличных меню стили применяются правильно, так как класс " menu" пойди añ adida в каждый ul. @user148419 – Deivid_41 09.11.2019, 18:33
  • 4
    ok я новый в этом jajaja, где я размещаю этот выбор пожалуйста ema, помогаю – rey.programdor 09.11.2019, 18:35
  • 5
    Спасибо за ответ, но идея о сайте состоит в том, чтобы отвечать довольно формулируемые вопросы, не реализовывать обязанности другого. OP не взял задание не показать реализованное усилие и также в размещенный пример mГ-nimo проверяемо . Вопросы как эта не deberí an быть отвеченным. Tó дьявол в счете для другой возможности. Привет – Mauricio Contreras 09.11.2019, 19:28
  • 6
    Ты имеешь razó n @MauricioContreras только respondí потому что говорится о новом пользователе, но tendré в счете твой комментарий. – Deivid_41 09.11.2019, 19:32