Hi I want to replace a div that is already displayed with another Hidden div choosed when i click on one of them(3 other divs(hidden) initially). the 4 links related to the 4 divs and in same way i can do that in each link clicked. below is the code:
<script type="text/javascript">
#4 Id of divs
var models = document.getElementById('models')
var geometry = document.getElementById('geometry')
var assembly = document.getElementById('assembly')
var loads = document.getElementById('loads')
#4 ID OF links (related to each div)
var models1 = document.getElementById('models1')
var geometryy = document.getElementById('geometryy')
var assemblyy = document.getElementById('assemblyy')
var loads1 = document.getElementById('loads1')
geometryy.addEventListener("click", function () {
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "none"
geometry.style.display = "block"
})
assemblyy.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "block"
})
loads1.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
assembly.style.display = "none"
loads.style.display = "block"
})
models1.addEventListener("click", function () {
models.style.display = "block"
geometry.style.display = "none"
assembly.style.display = "none"
loads.style.display = "none"
})
</script>
CSS:
<style>
#loads {
display: none;
}
#geometry {
display: none;
}
#assembly {
display: none;
}
#models {
display: block;
}
</style>
some Html code about the 4 divs:
<form action="{% url 'results' %}" method="post" id="gallery" novalidate onsubmit="return mySubmitFunction(event)">
<div style="padding-top: 10px; margin-left:138px;" id="models" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div style="background-color: #C0C0C0;">
<nav >
<a style="font-weight: bolder; border-style: solid;" id="models1">Models</a>
<a href="#geometry" style=" font-weight: bolder; " id="geometryy">Geometry</a>
<a href="#assembly" style=" font-weight: bolder;" id="assemblyy">Assembly</a>
<a href="#loads" style=" font-weight: bolder;" id="loads1">Loads</a>
</nav>
</div>
.......... some fields related to the div id="models"
</div>
</div>
----------------About the second div
<div style="padding-top: 10px;" id="geometry" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div style="background-color: #C0C0C0;">
<nav >
<a href="#models" style="font-weight: bolder;">Models</a>
<a style=" font-weight: bolder; border-style: solid;">Geometry</a>
<a href="#assembly" style=" font-weight: bolder;" id="assembly2">Assembly</a>
<a href="#loads" style=" font-weight: bolder;" id="loads2">Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the third div
<div style="padding-top: 10px;" id="assembly" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div style="background-color: #C0C0C0;">
<nav >
<a href="#models" style="font-weight: bolder;">Models</a>
<a href="#geometry" style=" font-weight: bolder;">Geometry</a>
<a style=" font-weight: bolder; border-style: solid;">Assembly</a>
<a href="#loads" style=" font-weight: bolder;" id="loads3" >Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the fourth div
<div style="padding-top: 10px; " id="loads" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem;">
<div style="background-color: #C0C0C0;">
<nav >
<a href="#models" style="font-weight: bolder;" >Models</a>
<a href="#geometry" style=" font-weight: bolder;">Geometry</a>
<a href="#assembly" style=" font-weight: bolder;" id="assemblyyy">Assembly</a>
<a style=" font-weight: bolder; border-style: solid;">Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
</form>
what i want :at first the "models" div is shown and the other 3 divs("geometry",assembly","loads") are hidden , so i want when i click on "geometry" div , the first div "models" become hidden and the other divs ("assembly" and "loads" still hidden) and so on if click on assembly... i i want to apply that on every div(because evry div has the 4 links) But it doesn't give me any result!
CodePudding user response：
<html>
<head>
<style>
#div2, #div3, #div4{
display: none;
}
</style>
</head>
<body>
<div style="background-color: #C0C0C0 ;padding-top: 10px;width: 62rem; height: 32rem; ">
<div>
<a href="#models" style="border-style: solid;" >Models</a>
<a href="#geometry" >Geometry</a>
<a href="#assembly" >Assembly</a>
<a href="#loads" >Loads</a>
</div>
<div id="div1" >
Models and other stuffs here
</div>
<div id="div2" >
Geometry and other stuffs here
</div>
<div id="div3" >
Assembly and other stuffs here
</div>
<div id="div4" >
Loads and other stuffs here
</div>
</div>
<script>
window.onload = btn() ;
function btn() {
var query = document.querySelectorAll(".geo") ; //No of hrefs
var pts = document.querySelectorAll(".hid"); //No of divs
for(var i=0;i<query.length;i ){
query[i].addEventListener("click", function() { //know which href is being clicked currently
var cla = this.getAttribute('class').split(' ')[1] ; //get second class of current href which would be wy, pk, fk, gk respectively.
var point = document.querySelectorAll("." cla)[1]; //selecting the div as, [0] would select the href
for(var j=0;j<pts.length;j ){
pts[j].style.display = "none"; //hid all the div
query[j].style.border= "none"; //remove all the href border
}
this.style.border= "solid"; //Add currently clicked href border
point.style.display = "block"; //display currently clicked div
})
}
}
</script>
</body>
</html>
Sorry the id and classes name are given random i am not good at naming. Please don't hesitate to ask if you are confused
CodePudding user response：
this is the code if you can help : html:
<div>
<a href="#div1" style="border-style: solid;" id="models1">Models</a>
<a href="#div2" id="geometry1">Geometry</a>
<a href="#div3" id="assembly1">Assembly</a>
<a href="#div4" id="loads1">Loads</a>
</div>
javascript:
<script type="text/javascript">
var anchorass2 = document.getElementById('geometry1');
anchorass2.addEventListener('click', doSomething, false);
function doSomething() {
var id_model1 =
document.getElementById("id_model1");
var id_model2 =
document.getElementById("id_model2");
if(id_model1.checked == false && id_model2.checked == false ){
alert("Check one of the model in Models Section please!")
document.getElementById('submit_label2').innerHTML ="check one field please!"
event.preventDefault();
}else if(id_model1.checked == true && id_model2.checked == true ){
alert("Please check only one model, not both!")
document.getElementById('submit_label2').innerHTML ="one field please and not both!"
event.preventDefault();
}
else {
document.getElementById('submit_label2').innerHTML =""
return true;
}
}
</script>
CodePudding user response：
<html>
<!DOCTYPE html>
{% load static %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}
<html lang="en">
<head>
<!-- {% if form.errors %}
<script>
alert('{{ message }}');
</script>
{% endif %}-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- jQuery and Bootstrap CSS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
document.getElementById('startdateId').value = new Date().toISOString().slice(0, 10);
</script>
<script>
document.querySelector('#plate_material').value = '';
</script>
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- HTMX -->
<script src="https://unpkg.com/[email protected]"></script>
<script defer src="{% static 'js/activePage.js' %}"> </script>
<style>
#div2, #div3, #div4{
display: none;
}
.floated {
display: inline-block;
}
a:is(:link, :active, :visited).active{
color:white;
}
.column {
float: left;
width: 33.33%;
padding: 25px;
}
body{
background-image: url("{% static 'img/backgd.png' %}");
}
.row::after {
content: "";
clear: both;
display: table;
}
.checkboxes label {
display: inline-block;
padding-right: 10px;
white-space: nowrap;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
}
label .info {
text-align: center;
margin-top: 0.2rem;
margin-left: 1.6rem;
font-weight: 600;
font-size: 0.8rem;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calculator | Structure Form </title>
<!-- Google Font: Source Sans Pro #as_crispy_field-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var $select1=$('#select1'),
$select2=$('#select2'),
$select3=$('#select3'),
//<!-- Now we want to find the options of select2 when the user select an option frol field1 -->
$options = $select2.find('option');
$optionss = $select3.find('option');
//<!-- Use on change event -->
$select1.on('change',function()
{
$select2.html($options.filter('[value="' this.value '"]'));
}).trigger('change');
$select1.on('change',function()
{
$select3.html($optionss.filter('[value="' this.value '"]'));
}).trigger('change');
});
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %} ">
<!-- Theme style -->
<link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %} ">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form action="{% url 'results' %}" method="post" id="gallery" novalidate onsubmit="return mySubmitFunction(event)">
{% csrf_token %}
{% for error in errors %}
<div role="alert">
<strong>{{ error }}</strong>
</div>
{% endfor %}
<div style="background-color: #C0C0C0 ;padding-top: 10px;width: 62rem; height: 32rem; ">
<div>
<a href="#div1" style="border-style: solid;" id="models1">Models</a>
<a href="#div2" id="geometry1">Geometry</a>
<a href="#div3" id="assembly1">Assembly</a>
<a href="#div4" id="loads1">Loads</a>
</div>
<div id="div1" >
<h2 style="text-align:center; margin-top: 19px; font-weight: bold;" >Balustrade models</h2>
<div >
<label for="id_model1">
<img style="height: 55px; width: 40px; height: 215px; width:172px; margin-left: 156px;"
src="{% static 'img/model1.png' %}"
/>
</label>
<input type="checkbox" id="id_model1" name="model1" autocomplete="off" >
<label for="id_model2">
<img src="{% static 'img/model2.png' %}" style="height: 215px; width:172px; margin-left: 300px;" onclick="myfunction()">
</label>
<input type="checkbox" id="id_model2" name="model2" autocomplete="off">
</div>
<div style="line-height: 0.00001;">
<a href="{%url 'forms'%}" style=" color: black; font-weight: bolder; font-size: 25px; margin-left:29px; margin-top: 18px;">Back</a>
<a style="color: black; font-weight: bolder; font-size: 25px; margin-left:820px; margin-top: 18px;" id = "clickmodels">Next</a>
<label id="submit_label1" style="color: red; margin-left: 389px; margin-top: 0rem; padding-top: 0rem;"></label>
</div>
</div>
<div id="div2" >
<div style="display: flex;">
<div>
<img src="{% static 'img/dimensions.png' %}" style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
<h1 style="margin-left: 256px; font-weight: bolder; font-size: 16px;">Handlauf</h1>
<h1 style="margin-left: 256px; font-weight: bolder; font-size: 13px;">Plate material (Steel Grade):</h1>
<p style="margin-left: 256px; font-weight: bolder; font-size: 13px;">{{ form.plate_material}} </p>
<p style="margin-left: 256px; font-weight: bolder; font-size: 13px;">{{ form.category.label_tag }}</p>
<p style="margin-left: 256px; font-weight: bolder; font-size: 13px; ">{% render_field form.category autocomplete="off" hx-get="/sizes/" hx-target="#id_sizes" %}</p>
<p style="margin-left: 256px; font-weight: bolder; font-size: 13px; ">{{ form.sizes.label_tag }}</p>
<p style="margin-left: 256px; font-weight: bolder; font-size: 13px;">{% render_field form.sizes autocomplete="off"%}</p>
<h1 style="margin-left: 256px; font-weight: bolder; font-size: 13px; ">Hgc: {{ form.height}} mm</p>
<h1 style="margin-left: 256px; font-weight: bolder; font-size: 13px; ">Distance between posts:</h1>
<p style="margin-left: 256px; font-weight: bolder; font-size: 13px;">Dpot: {{ form.distance}} mm</p>
</div>
</div>
<div style="line-height: 0.00001;">
<a href="#models" style="color: black; font-weight: bolder; font-size: 25px; margin-left:29px; margin-top: 19.5px;">Back</a>
<a style="color: black; font-weight: bolder; font-size: 25px; margin-left:820px; margin-top: 19.5px;" id = "clickMe">Next</a>
<label id="submit_label2" style="color: red; margin-left: 179px; padding-left: 140px; margin-top: 0rem; padding-top: 0rem;"></label>
</div>
</div>
<div id="div3" >
<div style="display: flex;">
<div>
<img src="{% static 'img/asssembly.png' %}" style="margin-left:25px; display:none; height: 360px; width:245px; margin-top: 12px;" id="tinypic_1">
<img src="{% static 'img/assemblage_model1.png' %}"style="margin-left:25px; display:none; height: 360px; width:245px; margin-top: 12px;" id="tinypic_2">
</div>
<div style="line-height: 0.001; margin-top: 12px;">
<h1 style=" font-weight: bolder; font-size: 13px;">Spacing:</h1>
<p style="font-weight: bolder; font-size: 13px; "><strong style="margin-right: 12px; margin-left: 25px;">S1:</strong>{{ form.spacing1}} mm </p>
<p style="font-weight: bolder; font-size: 13px;"><strong style="margin-right: 12px; margin-left: 25px;">S2:</strong>{{ form.spacing2}} mm </p>
</div>
<br>
<br>
<div style="line-height: 0;">
<a href="#geometry" style="color: black; font-weight: bolder; font-size: 25px; margin-left:29px; margin-top: 19.5px;">Back</a>
<a style="color: black; font-weight: bolder; font-size: 25px; margin-left:820px; margin-top: 19.5px;" id = "clickAssembly">Next</a>
<label id="submit_label3" style=" font-size: 13px; color: red; margin-left: 179px; padding-left: 140px; margin-top: 0rem; padding-top: 0rem;"></label>
</div>
</div>
<div id="div4" >
<div style="display: flex;">
<div style="line-height: 0;">
<img src="{% static 'img/loads.png' %}" style="height: 342px; width:225px; margin-left: 16px; padding-left: 30px; margin-top: 0px;">
</div>
<div>
<div id="tblFruits" style="line-height: 0; margin-top: -10px;">
<div style=" display:flex; margin-top: 0px;">
<input style=" line-height: 0;margin-left: 256px; font-weight: bolder; font-size: 13px;margin-top: 12px; " type="checkbox" name = "domestic_residential" id="id_domestic_residential" autocomplete="off"/><label style="padding-top: 20px;">Domestic and residential areas (A):0.6 kN/ml</label>
</div>
<div style=" display:flex; margin-top: 0px;">
<input style=" line-height: 0; margin-left: 256px; font-weight: bolder; font-size: 13px; margin-top: 12px; " type="checkbox" name = "office_area" id="id_office_area" autocomplete="off"/><label style="padding-top: 21px;">Office areas (B): 0.6 kN/ml</label>
</div>
<div style=" display:flex; margin-top: 0px;">
<input style="line-height: 0; margin-left: 256px; font-weight: bolder; font-size: 13px; margin-top: 12px; " type="checkbox" name = "public_buildings" id="id_public_buildings" autocomplete="off"/><label style="padding-top: 21px;">Public buildings, meeting rooms (C1 to C4): 1 kN/ml</label>
</div>
<div style=" display:flex; margin-top: 0px;">
<input style="line-height: 0; margin-left: 256px; font-weight: bolder; font-size: 13px; margin-top: 12px; " type="checkbox" name = "shoopping_areas" id="id_shoopping_areas" autocomplete="off"/><label style="padding-top: 21px;">Shopping areas (D): 1 kN/ml</label>
</div>
<div style=" display:flex; margin-top: 0px;">
<input style="line-height: 0; margin-left: 256px; font-weight: bolder; font-size: 13px; margin-top: 12px; " type="checkbox" name = "industrial_areas" id="id_industrial_areas" autocomplete="off"/><label style="padding-top: 21px;">Industrial areas susceptible to accumulation loads(E1): 0.8 kN/ml</label>
</div>
</div>
<div style="line-height: 0.001;">
<a href="#assembly" style="color: black; font-weight: bolder; font-size: 25px; margin-left:29px;">Back</a>
<a href="#result" style="color: black; font-weight: bolder; font-size: 25px; margin-left:820px; " onclick="location.href='#result'"><button style="font-weight: bold; border: none;
outline: none;
background: none;">Next</button></a>
<label id="submit_label" style=" color: red; margin-left: 179px; padding-left: 120px; margin-top: 0rem; padding-top: 0rem; font-size: 13px;"></label>
<label id="submit_label2" style="color: red; font-size: 13px;"></label>
</div>
</div>
</form>
<script>
window.onload = btn() ;
function btn() {
var query = document.querySelectorAll(".geo") ;
var pts = document.querySelectorAll(".hid");
for(var i=0;i<query.length;i ){
query[i].addEventListener("click", function() {
var cla = this.getAttribute('class').split(' ')[1] ;
var point = document.querySelectorAll("." cla)[1];
for(var j=0;j<pts.length;j ){
pts[j].style.display = "none";
query[j].style.border= "none";
}
this.style.border= "solid";
point.style.display = "block";
})
}
}
</script>
<script type="text/javascript">
var anchorass2 = document.getElementById('geometry1');
anchorass2.addEventListener('click', doSomething, false);
function doSomething() {
var id_model1 = document.getElementById("id_model1");
var id_model2 = document.getElementById("id_model2");
if(id_model1.checked == false && id_model2.checked == false ){
alert("Check one of the model in Models Section please!")
event.preventDefault();
}else if(id_model1.checked == true && id_model2.checked == true ){
alert("Please check only one model, not both!")
event.preventDefault();
}
else {
document.getElementById('submit_label2').innerHTML =""
return true;
}
}
</script>
</body>
</html>