javascript - 点击在单页 web 应用程序上标记以访问类，以便能够禁用图像并带回其他图像

Question

我的网络应用程序应该让用户能够选择：材料类别 -> 公斤类别 -> 产品。

我有一些我点击的图像，我得到了一些其他的图像。我想要一个顶部的栏，让用户能够从他当前的选择中退后一步。这是一个单页网络应用程序，并且

看不到工作。

            <button class="pulse-button" style="color: red;"> START </button>

            <script>


                $( ".pulse-button" ).click(function() {

                     $(this).hide();

                });


            </script>

            <!--MATERIALS GROUP-->




    <nav id="naviBar" style=" margin-left: 350px;">

        <ol class="cd-breadcrumb triangle custom-icons">

            <li id="startID"><a href="#start">Start</a></li>

            <li id="materialID" a href="#materials" class="current" ><em>Material</em></li>

            <li><a id="kilosID" href="#kilos">Kilos</a></li>

            <li><a id="resultID" href="#result">Result</a></li>

        </ol>

    </nav>


        <section class="btn-group">

                <button id="plasterBoard">Plaster board</button>
                <button id="brickImage">Brick</button>
                <button id="concreteStone">Concrete &amp; Stone</button> <!-- PUT A "&" SIGN BETWEEN -->
                <button id="aerateConcrete">Aerate Concrete</button>



           </section>





            <!-- KILO BUTTONS DEFININGS-->

            <div class="plaster-kilo-btn-group" >

                <button align="center"  id="tenKilo" >10 kilo</button>
                <button align="center"  id="twentyFive" >25 Kilo</button>
                <button align="center"  id="oneHundred">100 kilo</button>
                <button align="center"  id="hundredFifty">150 kilo</button>


            </div>


    <!-- PLASTER BOARD ANCHROS SCREW PER KILO BUTTONS DEFININGS-->    

        <div class="material-plaster-kilo-btn-group">

            <button align="center"  id="pictureHook"  >Picture Screw</button>
            <button align="center"  id="nylonMetalDrive"  >Nylon and Metal</button>
            <button align="center"  id="zipToogle"  >Zip Toogle</button>
            <button align="center"  id="strapToogle"  >Strap Toogle</button>

        </div>



               <!-- BRICK ANCHROS SCREW PER KILO BUTTONS DEFININGS--> 
    <div class="brick-kilo-btn-group" >
                <button align="center"  id="BrickTwentyFive"; >25 Kilo</button>
                <button align="center"  id="Brickfifty">50 kilo</button>
                <button align="center"  id="BrickOneHundred">100 kilo</button>

    </div>


    <!-- BRICK  ANCHROS SCREW PER KILO BUTTONS DEFININGS-->

    <div class="material-brick-kilo-btn-group">

            <button align="center"  id="nylonPlugSixMM" style="color: white;" >Nylon 655mm Plug </button>
            <button align="center"  id="nylonPlugEightMM"; style="color: white"  >Nylon 58mm Plug </button>
            <button align="center"  id="nylonPlugTENMM"  >Nylon 10mm Plug </button>

       </div>     



    <!-- CONCRETE ANCHROS SCREW PER KILO BUTTONS DEFININGS--> 
     <div class="material-CONCRETE-kilo-btn-group">  
                <button align="center"  id="ConcreteFifty">50 kilo</button>
                </div> 



    <!-- AERATE CONCRETE ANCHROS SCREW PER KILO BUTTONS DEFININGS--> 
     <div class="material-AECONCRETE-kilo-btn-group"> 
                <button align="center"  id="AEConcreteFifty">50 kilo</button>
                <button align="center"  id="AEConcreteHundred">100 kilo</button>

    </div>





            <!-- AERATE CONCRETE ANCHROS SCREW PER KILO BUTTONS DEFININGS-->

            <div class="material-AECONCRETE-Anchros-btn-group"> 
                <button align="center"  id="metalPlugsAE"  >Nylon 8mm Plug </button>
                <button align="center"  id="zincAlloy"  >Nylon 10mm Plug </button>
                </div>


                <script>





               $("button").click(function(){

                   $("#plasterBoard").css('display', 'block');
                   $("#brickImage").css('display', 'block');
                   $("#concreteStone").css('display', 'block');
                   $("#aerateConcrete").css('display', 'block');
                   $("#naviBar").css('display', 'block');



               });
                    /*LAYER MATERIAL BUTTONS*/

                  $( "#plasterBoard" ).click(function() {

                     $(".btn-group").hide();



                });

                         /*BRICK BUTTON HIDE*/

                  $( "#brickImage" ).click(function() {

                        $(".btn-group").hide();

                });

                         /*CONCRETE BUTTON HIDE*/

                  $( "#concreteStone" ).click(function() {

                       $(".btn-group").hide();

                });
                         /*AERATE CONCRETE BUTTON HIDE*/
                   $( "#aerateConcrete" ).click(function() {

                       $(".btn-group").hide();

                });

                </script>


  CSS

//图像的石膏板脚本

          $("#tenKilo").click(function(){

                   $("#pictureHook").css('display', 'block');

               });


          $( "#tenKilo" ).click(function() {

                   $(".plaster-kilo-btn-group").hide();

                });



          $("#twentyFive").click(function(){

                   $("#nylonMetalDrive").css('display', 'block');

               });



           $( "#twentyFive" ).click(function() {

                   $(".plaster-kilo-btn-group").hide();

                });



                  $("#oneHundred").click(function(){

                   $("#zipToogle").css('display', 'block');

               });

           $( "#oneHundred" ).click(function() {

                   $(".plaster-kilo-btn-group").hide();

                });



                  $("#hundredFifty").click(function(){

                   $("#strapToogle").css('display', 'block');

               });


          $( "#hundredFifty" ).click(function() {

                   $(".plaster-kilo-btn-group").hide();

                });


          $("#pictureHook").click(function(){

                   $("#videoTeliko").css('display', 'block');

               });

           //Brick Script for Images




          $("#BrickTwentyFive").click(function(){

                   $("#nylonPlugEightMM").css('display', 'block');

               });

           $( "#BrickTwentyFive" ).click(function() {

                   $(".brick-kilo-btn-group").hide();

                });



          $("#Brickfifty").click(function(){

                   $("#nylonPlugSixMM").css('display', 'block');

               });


          $( "#Brickfifty" ).click(function() {

                   $(".brick-kilo-btn-group").hide();

                });







          $("#BrickOneHundred").click(function(){

                   $("#nylonPlugEightMM").css('display', 'block');

               });

           $( "#BrickOneHundred" ).click(function() {

                   $(".brick-kilo-btn-group").hide();

                });




              //CONCRETE weight Script for Images

标签： javascriptjqueryhtmlcss