08.02.2015, 16:53
|
|
Интересующийся
|
|
Регистрация: 05.02.2015
Сообщений: 20
|
|
Сообщение от рони
|
Zyuzka,
либо я вас не понял либо вам нужно заменить в 4 строке a на h
|
Если мы заменяем "a" на"h", красятся все div'ы с id "a". А нужно что бы по нажатию на h0 красился a0, h1-->a0,a1, h2--> a0,a1,a1 и т.д. |
|
08.02.2015, 17:12
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
|
Zyuzka,
сделайте html
|
|
08.02.2015, 17:20
|
|
Интересующийся
|
|
Регистрация: 05.02.2015
Сообщений: 20
|
|
|
Сообщение от рони
|
Zyuzka,
сделайте html
|
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
header{
width: 225px;
height: 32px;
border: 1px solid black;
}
header>div{width: 13px;
height: 15px;
border:1px solid black;
background-color:white;
float:left;
cursor: default;
}
.time{border:0;
width: 15px;
}
</style>
<script>
function test() {
var divs;
for (var j = 0; j < 15; j++) {
divs = document.getElementById('h' + j);
divs.onclick = function () {
var color = "linear-gradient(to right, blue, blue)"
for (var j = 0; j < 15; j++) {
divs = document.getElementById('a' + j);
divs.style.backgroundImage = divs == this ? "linear-gradient(to right, blue 50%, white 50%)" : color;
if (divs == this) color = '';
}
}
}
}
</script>
</head>
<body onload="test()">
<header>
<div class="time" id="h0">10</div>
<div class="time" id="h1">11</div>
<div class="time" id="h2">12</div>
<div class="time" id="h3">13</div>
<div class="time" id="h4">14</div>
<div class="time" id="h5">15</div>
<div class="time" id="h6">16</div>
<div class="time" id="h7">17</div>
<div class="time" id="h8">18</div>
<div class="time" id="h9">19</div>
<div class="time" id="h10">20</div>
<div class="time" id="h11">21</div>
<div class="time" id="h12">22</div>
<div class="time" id="h13">23</div>
<div class="time" id="h14">24</div>
<div id="a0"></div>
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
<div id="a4"></div>
<div id="a5"></div>
<div id="a6"></div>
<div id="a7"></div>
<div id="a8"></div>
<div id="a9"></div>
<div id="a10"></div>
<div id="a11"></div>
<div id="a12"></div>
<div id="a13"></div>
<div id="a14"></div>
</header>
</body>
</html>
|
|
08.02.2015, 17:35
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
Zyuzka,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
header {
width: 225px;
height: 32px;
border: 1px solid black;
}
header>div {
width: 13px;
height: 15px;
border: 1px solid black;
background-color: white;
float: left;
cursor: default;
}
.time {
border: 0;
width: 15px;
}
</style>
<script>
function test() {
var divs;
for (var j = 0; j < 15; j++) {
divs = document.getElementById('h' + j);
divs.onclick = function(j) {
return function() {
var color = "linear-gradient(to right, blue, blue)"
for (var i = 0; i < 15; i++) {
divs = document.getElementById('a' + i);
divs.style.backgroundImage = j == i ? (color = '',"linear-gradient(to right, blue 50%, white 50%)") : color;
}
}
}(j)
}
}
</script>
</head>
<body onload="test()">
<header>
<div class="time" id="h0">10</div>
<div class="time" id="h1">11</div>
<div class="time" id="h2">12</div>
<div class="time" id="h3">13</div>
<div class="time" id="h4">14</div>
<div class="time" id="h5">15</div>
<div class="time" id="h6">16</div>
<div class="time" id="h7">17</div>
<div class="time" id="h8">18</div>
<div class="time" id="h9">19</div>
<div class="time" id="h10">20</div>
<div class="time" id="h11">21</div>
<div class="time" id="h12">22</div>
<div class="time" id="h13">23</div>
<div class="time" id="h14">24</div>
<div id="a0"></div>
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
<div id="a4"></div>
<div id="a5"></div>
<div id="a6"></div>
<div id="a7"></div>
<div id="a8"></div>
<div id="a9"></div>
<div id="a10"></div>
<div id="a11"></div>
<div id="a12"></div>
<div id="a13"></div>
<div id="a14"></div>
</header>
</body>
</html>
Последний раз редактировалось рони, 08.02.2015 в 17:42.
|
|
08.02.2015, 17:38
|
|
Интересующийся
|
|
Регистрация: 05.02.2015
Сообщений: 20
|
|
|
рони,
Огромное спасибо!!!
|
|
08.02.2015, 17:44
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
|
Zyuzka,
убрал строку 38 ))) сейчас она в 37
|
|
18.02.2015, 14:19
|
|
Интересующийся
|
|
Регистрация: 05.02.2015
Сообщений: 20
|
|
Хочу добавить выделение текста жирным.Но выделяет только последний элемент. В чём ошибка?
var color = "linear-gradient(to right, blue, blue)";
var divSlider;
for (var i = 0; i < 15; i++) {
divsSlider = document.getElementById('a' + i);
if (j == i){
divs.style.fontWeight = "bold";
divsSlider.style.backgroundImage = (color = '',"linear-gradient(to right, blue 50%, white 50%)");
}
else {
divs.style.fontWeight = "";
divsSlider.style.backgroundImage = color;
}
}
|
|
18.02.2015, 14:26
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
|
Zyuzka,
6 строка и 10 почему divs?
|
|
18.02.2015, 14:39
|
|
Интересующийся
|
|
Регистрация: 05.02.2015
Сообщений: 20
|
|
|
Сообщение от рони
|
Zyuzka,
6 строка и 10 почему divs?
|
Потому что должен меняться текст только divs, а у него document.getElementById('h' + j). |
|
18.02.2015, 14:45
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
Zyuzka,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
header {
width: 780px;
height: 100px;
border: 1px solid black;
}
header>div {
width: 50px;
height: 50px;
border: 1px solid black;
background-color: white;
float: left;
cursor: default;
}
.time {
border: 0;
width: 50px;
}
</style>
<script>
function test() {
var divs;
for (var j = 0; j < 15; j++) {
divs = document.getElementById('h' + j);
divs.onclick = function(j) {
return function() {
var color = "linear-gradient(to right, blue, blue)"
for (var i = 0; i < 15; i++) {
divs = document.getElementById('a' + i);
divs.style.backgroundImage = j == i ? (color = '',"linear-gradient(to right, blue 50%, white 50%)") : color;
divs.style.fontWeight = j >= i ? 'bold' : '';
divs.style.color = j >= i ? '#FFFFFF' : '';
divs.style.fontSize = j >= i ? 'larger' : '';
}
}
}(j)
}
}
</script>
</head>
<body onload="test()">
<header>
<div class="time" id="h0">10</div>
<div class="time" id="h1">11</div>
<div class="time" id="h2">12</div>
<div class="time" id="h3">13</div>
<div class="time" id="h4">14</div>
<div class="time" id="h5">15</div>
<div class="time" id="h6">16</div>
<div class="time" id="h7">17</div>
<div class="time" id="h8">18</div>
<div class="time" id="h9">19</div>
<div class="time" id="h10">20</div>
<div class="time" id="h11">21</div>
<div class="time" id="h12">22</div>
<div class="time" id="h13">23</div>
<div class="time" id="h14">24</div>
<div id="a0">w</div>
<div id="a1">w</div>
<div id="a2">w</div>
<div id="a3">w</div>
<div id="a4">w</div>
<div id="a5">w</div>
<div id="a6">w</div>
<div id="a7">w</div>
<div id="a8">w</div>
<div id="a9">w</div>
<div id="a10">w</div>
<div id="a11">w</div>
<div id="a12">w</div>
<div id="a13">w</div>
<div id="a14">w</div>
</header>
</body>
</html>
|
|
|
|
