Как добавить контент по умолчанию для div

Question

У меня есть сценарий, по которому содержимое div изменяется, когда пользователь нажимает на ссылку.

Но есть проблема. По умолчанию контейнер div пуст. Можно ли сохранить содержание планирования как по умолчанию при загрузке сайта?

Благодаря

document.getElementsByClassName("p1")[0].onclick = function(){ 
 
    $('.how-text').html($('.planning').html()); 
 
}; 
 

 
document.getElementsByClassName("p2")[0].onclick = function(){ 
 
    $('.how-text').html($('.results').html()); 
 
}; 
 

 
document.getElementsByClassName("p3")[0].onclick = function(){ 
 
    $('.how-text').html($('.improvements').html()); 
 
}; 
 

 
document.getElementsByClassName("p4")[0].onclick = function(){ 
 
    $('.how-text').html($('.communication').html()); 
 
};

.st { display:none; } 
 
.how-text { min-height: 300px; 
 
\t height: auto; 
 
\t background-color: #e6ebe4; 
 
\t padding: 20px; 
 
\t margin: 25px 0px 10px 0px; 
 
\t border-radius: 3px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-sm-6"> 
 
\t \t  <div class="row" style="width: 75%;margin: 0 auto;"> 
 
\t \t \t <div class="col-xs-6"> 
 
\t \t \t  <a href="#" id="one" class='p1'><span id="image1"><b>Planning</b></span></a> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-xs-6"> 
 
\t \t \t  <a href="#" class="p2"><span id="image2"><b>Results</b></span></a>   
 
\t \t \t </div> 
 
\t \t </div><br> 
 
\t \t <div class="row" style="width: 75%;margin: 0 auto;"> 
 
\t \t \t <div class="col-xs-6"> 
 
\t \t \t  <a href="#" class="p3"><span id="image3"><b>Improvements</b></span></a>    
 
\t \t \t </div> 
 
\t \t \t <div class="col-xs-6"> 
 
\t \t \t  <a href="#" class="p4"><span id="image4"><b>Communication</b></span></a>    
 
\t \t \t </div> 
 
\t \t </div> 
 
<div class="st"> 
 
      <div class="planning"> 
 
      <h3>Planning</h3> \t \t \t 
 
\t \t \t <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
 
\t \t \t Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
 
\t \t \t making it work for them. </p> \t 
 
      </div> \t 
 
\t \t \t 
 
\t \t \t <div class="results"> 
 
      <h3>Results</h3> \t \t \t 
 
\t \t \t <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
 
\t \t \t Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
 
\t \t \t making it work for them. </p> \t 
 
      </div> 
 
\t \t \t 
 
\t \t \t <div class="improvements"> 
 
      <h3>Improvements</h3> \t \t \t 
 
\t \t \t <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
 
\t \t \t Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
 
\t \t \t making it work for them. </p> \t 
 
      </div> 
 
      
 
      <div class="communication"> 
 
      <h3>Communication</h3> \t \t \t 
 
\t \t \t <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
 
\t \t \t Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
 
\t \t \t making it work for them. </p> \t 
 
      </div> \t \t \t \t 
 
\t \t </div> 
 
    <div class="col-sm-6 how-text"> 
 
      
 
    </div>

Answer 1

Что я считаю, ваш запрашиваемая загрузить '.planning' при загрузке страницы, без необходимого события щелчка?

Есть несколько способов, но с вашей помощью JQuery, попробуйте следующее:

// A $(document).ready() block. 
$(document).ready(function() { 
    console.log("ready!"); 

    // Trigger as soon as ready 
    $('.how-text').html($('.planning').html()); 


    // Other code (any startup code referancing DOM elements should be here unless in call-on-demain function) 

    $('.p1').click(function(e){function(){ 
     $('.how-text').html($('.planning').html()); 
    }); 

    $("p2").click(function(){ 
     $('.how-text').html($('.results').html()); 
    }); 

    $("p3").click(function(){ 
     $('.how-text').html($('.improvements').html()); 
    }); 

    $("p4").click(function(){ 
     $('.how-text').html($('.communication').html()); 
    }); 
}); 

Я также хотел бы смотреть больше на JQuery, если я вам, например, рефакторинга кода, чтобы последовательно использовать его, например как:

$('.p1').click(function(e){$('.how-text').html($('.planning').html());}); 

Я не уверен, что вы даже не нужно, что вложенный $ HTML(), только $ („планирование.) может работать, или даже лучше использовать JQuery плагин, который делает все ('планирование.“). это для вас и имеет анимации/переходы и ect

http://www.jqueryrain.com/demo/jquery-lazy-load/

Answer 2

В вашем вопросе можно сделать много способов.

просто попробуйте это !!

$('.how-text').html($('.planning').html()); 

document.getElementsByClassName("p1")[0].onclick = function(){ 
    $('.how-text').html($('.planning').html()); 
}; 

document.getElementsByClassName("p2")[0].onclick = function(){ 
    $('.how-text').html($('.results').html()); 
}; 

document.getElementsByClassName("p3")[0].onclick = function(){ 
    $('.how-text').html($('.improvements').html()); 
}; 

document.getElementsByClassName("p4")[0].onclick = function(){ 
    $('.how-text').html($('.communication').html()); 
}; 

DEMO

Update: после вашего комментария Not Working on Site.. could be some issue

Вы называется jQuery library дважды просто удалить один! Я просто найти из divinepower.co.in/smg

Answer 3

решенный .....

function codeAddress() { 
 
    $('.how-text').html($('.planning').html()); 
 
} 
 

 
window.onload = codeAddress; 
 

 
document.getElementsByClassName("p1")[0].onclick = function(){ 
 
    $('.how-text').html($('.planning').html()); 
 
}; 
 

 
document.getElementsByClassName("p2")[0].onclick = function(){ 
 
    $('.how-text').html($('.results').html()); 
 
}; 
 

 
document.getElementsByClassName("p3")[0].onclick = function(){ 
 
    $('.how-text').html($('.improvements').html()); 
 
}; 
 

 
document.getElementsByClassName("p4")[0].onclick = function(){ 
 
    $('.how-text').html($('.communication').html()); 
 
};