Работа с якорями или с id?
Есть файл с такой структурой
<div class="game" id="a1">Какой-то текст1 <a href="#a2">Ссылка2</a> <a href="#a3">Ссылка3</a> </div> <div class="game" id="a2">Какой-то текст2 <a href="#a3">Ссылка3</a> <a href="#a1">Ссылка1</a> </div> <div class="game" id="a3">Какой-то текст3 <a href="#a4">Ссылка4</a> <a href="#a2">Ссылка2</a> </div> <div class="game" id="a4">Какой-то текст4 <a href="#a2">Ссылка2</a> <a href="#a1">Ссылка1</a> </div> Как получить измененное id, при переходе по якорю чтобы потом произвести с div'ом какие-то действия? Пробовал сделать это при помощи якорей, но показывает якорь того div'a в котором нажимается на ссылку. Подскажите. Заранее благодарен. |
html
<div class="game" id="a1">Какой-то текст1 <a href="#a2">Ссылка2</a> <a href="#a3">Ссылка3</a> </div> <div class="game" id="a2">Какой-то текст2 <a href="#a3">Ссылка3</a> <a href="#a1">Ссылка1</a> </div> <div class="game" id="a3">Какой-то текст3 <a href="#a4">Ссылка4</a> <a href="#a2">Ссылка2</a> </div> <div class="game" id="a4">Какой-то текст4 <a href="#a2">Ссылка2</a> <a href="#a1">Ссылка1</a> </div> js
document.getElementsByTagName('a').onclick = function () {
document.getElementsByClassName('game').setAttribute('id', this.getAttribute('href'));
}
|
Tecvid,
:blink: |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
если нужно изменить стили у этого div то существует селектор target <p data-height="348" data-theme-id="0" data-slug-hash="EoBJF" data-default-tab="result" data-user="elad2412" class='codepen'>See the Pen <a href='http://codepen.io/elad2412/pen/EoBJF/'>CSS Target Event</a> by Elad Shechter (<a href='http://codepen.io/elad2412'>@elad2412</a>) on <a href='http://codepen.io'>CodePen</a>.</p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> |
Цитата:
<div class="game" id="a1">Какой-то текст1 <a href="?id=a2">Ссылка2</a> <a href="?id=a3">Ссылка3</a> </div> <div class="game" id="a2">Какой-то текст2 <a href="?id=a3">Ссылка3</a> <a href="?id=a1">Ссылка1</a> </div> <div class="game" id="a3">Какой-то текст3 <a href="?id=a4">Ссылка4</a> <a href="?id=a2">Ссылка2</a> </div> <div class="game" id="a4">Какой-то текст4 <a href="?id=a2">Ссылка2</a> <a href="?id=a1">Ссылка1</a> </div> а потом получить данные из запроса get посредством js
var get = {};
if (location.search) {
var c = location.search.substring(1).split('&');
for (var i = 0; i < c.length; i++) {
var ar = c[i].split('=');
if (ar[0] != '') {
get[ar[0]] = unescape(ar[1]);
}
}
}
var id = get['id'];
и затем поставить переменную id в атрибут id, советую с помощью jquery, так вроде проще
$('.game').attr('id', id);
|
Stroy,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.orange {
background: #FFCC00;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var s = $(".game");
s.find('a').click(function() {
var target = this.hash;
s.not(target).removeClass("orange"); // .not(target) можно убрать
$(target).toggleClass("orange");
});
});
</script>
</head>
<body>
<div class="game" id="a1">Какой-то текст1
<a href="#a2">Ссылка2</a>
<a href="#a3">Ссылка3</a>
</div>
<div class="game" id="a2">Какой-то текст2
<a href="#a3">Ссылка3</a>
<a href="#a1">Ссылка1</a>
</div>
<div class="game" id="a3">Какой-то текст3
<a href="#a4">Ссылка4</a>
<a href="#a2">Ссылка2</a>
</div>
<div class="game" id="a4">Какой-то текст4
<a href="#a2">Ссылка2</a>
<a href="#a1">Ссылка1</a>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 01:19. |