вызов DIV с содержимом по ссылке
Здравствуйте! Помогите с проблемой.
Допустим есть две ссылки: <div class="link" style="text-align: center">
<a href="index.html" id="game"></a>
<a href="index.html" id="game2"></a>
</div>
И есть DIV с с содержимым <div class='content'>
<div id="firstcont"></div>
</div>
Как мне при переходе на другую ссылку, в данном случае <a href="index.html" id="game2"></a> Менять содержимое DIV? Я так понял нужно создавать отдельный div и вызывать его при переходе по ссылке, при этом, применяя на предыдущий div параметр: display: none Вообщем, как-то скрывать его. Вот как реализовать данный вызов? |
т.е. вы хотите без перезагрузки страницы менять содержимое дива? опишите чуть подробней
|
Да, изначально хотел без перезагрузки. Но нужно использовать AJAX для этого, а я в этом не разбираюсь. Если это не так сложно реализуется, то прошу мне помочь пожалуйста.
|
накидал.
пс: на работе завал. буду отвечать по возможности <html>
<head>
<title>Тестирование</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
function loadpage (ths) {
var url = ths.getAttribute('href');
$.post("test.php", { name: "John", time: "2pm" },
function(data){
console.log("Data Loaded: " + data);
$('div').html(data);
});
}
</script>
</head>
<body>
<a href="http://javascript.ru" onclick="loadpage(this); return false;">link 1</a>
<a href="http://javascript.ru" onclick="loadpage(this); return false;">link 2</a>
<div></div>
</body>
</html>
|
Спасибо большое за ответ, я попытался внедрить это в свой код, но он у меня не работает.
Привел пример: http://cssdeck.com/labs/nh2dofgk То есть нужно при переходе по ссылке, показывать DIV уже с другим содержимым. Пример: Нажимаю на 1 ссылку, вижу содержимое div'a с классом 'content' Нажимаю на 2 ссылку, показывается уже Другой DIV с другим классом и его содержимым, а предыдущий div скрывается, допустим, через display: none. P.S Вся ночь ушла, чтобы реализовать задуманное. Я был бы искренне рад, если бы мне помогли. Я чувствую, что решение где-то рядом, но я его не вижу. |
типа такого?
<html>
<head>
<title>Тестирование</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<a href="#content1" onclick="link(this);">link 1</a>
<a href="#content2" onclick="link(this);">link 2</a>
<div class="content">
<div class="content1" style="display: block;">1111111</div>
<div class="content2" style="display: none;">222222222</div>
</div>
<script>
var prev = $('.content1');
function link (ths) {
var href = ths.getAttribute('href'),
cl = href.split('#')[1],
obj = $('.' + cl);
prev.css('display', 'none');
obj.css('display', 'block');
prev = obj;
}
</script>
</body>
</html>
|
Это то, что мне нужно! Только нужно показывать все содержимое div'a с классом 'content', а при нажатии на другую ссылку показывать другой DIV с другим классом и содержимым
P.S Всего в каждом div'e по 4 класса: <div class="content">
<div class="content1">1111111</div>
<div class="content2"">222222222</div>
<div class="content3">222222222</div>
<div class="content4">222222222</div>
</div>
|
Вот такой html код я имею на данный момент:
<body>
<div class="main_header" style="text-align: center">
<a href="#" id="firstlink"></a>
<a href="#" id="secondlink"></a>
<a href="#" id="thirdlink"></a>
<a href="#" id="fourthlink"></a>
</div>
<div class="banner">
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div id="content4"></div>
</div>
<div class="banner2">
<div id="content5"></div>
<div id="content6"></div>
</div>
</body>
Пока что, при нажатии на эти ссылки ничего не происходит. Как виден был DIV, так он и останется видимым. Допустим, ссылка с классом 'first' показывает DIV с классом banner. При нажатии на ссылку с классом 'secondlink' должен показываться ДРУГОЙ DIV С ДРУГИМ СОДЕРЖИМЫМ. То есть, нужно как-то привязать ссылки к div'ам с разными классами и при нажатии на эти самые ссылки показывать DIV с классом, который к нему привязан. Простите, если я вас мучаю. Если это сложно реализуется, то я забью на эту идею, потому как кроме этого форума мне никто другой не поможет (Конечно, можно заплатить, но стоит ли это денег, если это, _возможно_ реализуется довольно легко) |
Лучше вот такой HTML
<style>.banner{display:none;}</style>
<div class="main_header" style="text-align: center">
<a href="#" id="firstlink">firstlink</a>
<a href="#" id="secondlink">secondlink</a>
<a href="#" id="thirdlink">thirdlink</a>
<a href="#" id="fourthlink">fourthlink</a>
</div>
<div class="banner" id="div_firstlink">
<div id="content1">Тут DIV от ссылки firstlink </div>
</div>
<div class="banner" id="div_secondlink">
<div id="content5">Тут DIV от ссылки secondlink</div>
</div>
<div class="banner" id="div_thirdlink">
<div id="content5">Тут DIV от ссылки thirdlink</div>
</div>
<div class="banner" id="div_fourthlink">
<div id="content5">Тут DIV от fourthlink</div>
</div>
и вот такой javascript var handler = {
handlerClick : function () {
$('.main_header a').on('click', function () {
var idlink = this.id;
changeDiv(idlink);
return false;
});
}
};
function changeDiv(a){
$('.banner').css('display', 'none');
$('#div_'+a).css('display', 'block');
};
function init() {
handler.handlerClick();
};
$(document).ready(function(){
init();
});
Не забудьте подключить JQUERY ! |
Вы сделали мне подарок на новый год! Спасибо большое, все работает как часы!
P.S Может до этого я как-то не так высказывался, поэтому не могли помочь, в любом случае спасибо большое вам! Как я рад! |
| Часовой пояс GMT +3, время: 04:18. |