Форум

seddx · #1 (**permalink**) 30.12.2014, 01:51

Здравствуйте! Помогите с проблемой.

Допустим есть две ссылки:

<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

Вообщем, как-то скрывать его.

Вот как реализовать данный вызов?

skrudjmakdak · #2 (**permalink**) 30.12.2014, 08:20

т.е. вы хотите без перезагрузки страницы менять содержимое дива? опишите чуть подробней

seddx · #3 (**permalink**) 30.12.2014, 08:23

Да, изначально хотел без перезагрузки. Но нужно использовать AJAX для этого, а я в этом не разбираюсь. Если это не так сложно реализуется, то прошу мне помочь пожалуйста.

skrudjmakdak · #4 (**permalink**) 30.12.2014, 08:59

накидал.
пс: на работе завал. буду отвечать по возможности

<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>

seddx · #5 (**permalink**) 30.12.2014, 09:56

Спасибо большое за ответ, я попытался внедрить это в свой код, но он у меня не работает.

Привел пример:

http://cssdeck.com/labs/nh2dofgk

То есть нужно при переходе по ссылке, показывать DIV уже с другим содержимым.

Пример: Нажимаю на 1 ссылку, вижу содержимое div'a с классом 'content'

Нажимаю на 2 ссылку, показывается уже Другой DIV с другим классом и его содержимым, а предыдущий div скрывается, допустим, через display: none.

P.S Вся ночь ушла, чтобы реализовать задуманное. Я был бы искренне рад, если бы мне помогли.

Я чувствую, что решение где-то рядом, но я его не вижу.

skrudjmakdak · #6 (**permalink**) 30.12.2014, 11:22

типа такого?

<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>

seddx · #7 (**permalink**) 30.12.2014, 11:54

Это то, что мне нужно! Только нужно показывать все содержимое 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>

seddx · #8 (**permalink**) 31.12.2014, 08:50

Вот такой 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 с классом, который к нему привязан.

Простите, если я вас мучаю. Если это сложно реализуется, то я забью на эту идею, потому как кроме этого форума мне никто другой не поможет

(Конечно, можно заплатить, но стоит ли это денег, если это, _возможно_ реализуется довольно легко)

Volonter · #9 (**permalink**) 31.12.2014, 10:06

Лучше вот такой 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 !

seddx · #10 (**permalink**) 31.12.2014, 14:17

Вы сделали мне подарок на новый год! Спасибо большое, все работает как часы!

P.S Может до этого я как-то не так высказывался, поэтому не могли помочь, в любом случае спасибо большое вам!

Как я рад!

Форум

Справочник

Discord чат

Курсы javascript