הנושאים החמים
document.getElementById(x).style.display = "what ever u need"; var x = document.getElementsByClassName("myClass")[i].id;
<!DOCTYPE html>
<html>
<head>
<style>
.try {
width:80px;
height: 20px;
background-color: lightblue;
display:none;
}
</style>
</head>
<body>
<div class="try" id="myTry1" >HTML</div>
<div class="try" id="myTry2" >CSS</div>
<div class="try" id="myTry3" >JavaScript</div>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementsByClassName("try")[1].id;
document.getElementById("demo").innerHTML = x;
document.getElementById(x).style.display = "inline";
}
</script>
</body>
</html>ככה אני רוצה לעשות.
לא לזה התכוונתי...
<!DOCTYPE html>
<html lang="en">
<head>
<title>select example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<select id="divs" name="divs" class="custom-select">
<option value="val1" selected>1</option>
<option value="val2">2</option>
<option value="val3">3</option>
<option value="val4">4</option>
<option value="val5">5</option>
</select>
<div id="rows">
<div id="val1">
<p>שורה ראשונה</p>
</div>
<div id="val2">
<p>שורה שניה</p>
</div>
<div id="val3">
<p>שורה שלישית</p>
</div>
<div id="val4">
<p>שורה רביעית</p>
</div>
<div id="val5">
<p>שורה חמישית</p>
</div>
</div>
<script>
$(document).ready(function(){
v = $('#divs').val();
//console.log(v);
$('#rows > div').hide();
$('#'+v).show();
$('#divs').change(function(){
v = this.value;
//console.log(v);
$('#rows > div').hide();
$('#'+v).show();
});
});
</script>
</body>
</html>תודה!!!!!
כדאי שתלמד קצת על JQUERY ובוטסטראפ. ולא, אי אפשר לכלול את כל הספריות האלו בקובץ אחד, כי הן ממש גדולות.
שוב, אני רוצה להשתמש רק ב css וב js אז למה אי אפשר לעשות ככה
<!DOCTYPE html>
<html>
<body>
<select onchange="myFunction()" id="mySelect">
<option value="1">1 דיב</option>
<option value="2">דיב 2</option>
<option value="3">דיב 3</option>
<option value="4">דיב 4</option>
<option value="5">דיב 5</option>
</select>
<div id="displays">
<div id="div1" style="display:none">1</div>
<div id="div2" style="display:none">2</div>
<div id="div3" style="display:none">3</div>
<div id="div4" style="display:none">4</div>
<div id="div5" style="display:none">5</div>
</div>
<script>
function myFunction(){
var x = document.getElementById('mySelect').value;
console.log(x);
var y = document.getElementById('displays').getElementsByTagName('div');
for (var i=0; i < y.length; i++) {
y[i].style.display = 'none';
}
document.getElementById('div' + x).style.display = 'block';
}
</script>
</body>
</html>תודה
מעכשיו, תהיו הראשונים לקבל את כל העדכונים, החדשות, ההפתעות בלעדיות, והתכנים הכי חמים שלנו בפרוג!
לוח לימודים
מסלולי לימוד שאפשר להצטרף
אליהם ממש עכשיו:
