Мое веб-приложение должно предоставлять пользователям возможность выбирать: Категория материала -> Категория килограммов -> Продукт.
У меня есть несколько изображений, которые я нажимаю, и я получаю некоторые другие изображения.Я хочу панель сверху, которая даст возможность пользователю вернуться на шаг назад от его текущего выбора.Это одностраничное веб-приложение и
не работает.
<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 & 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