0

I'm trying to change information on the div "principal" depending on wether you click "About us" "Find Us" and "Contact". Like, when you click on "About us", put some info. If you click on "Find Us" have a Google map, etc. How can I achieve that on jQuery? Thanks in advance.

body{
   background-color: #018c24
}

li{
  list-style: none;

}

.contenedor{
  background-color: white;
  margin: auto;
  width: 70%;
  height: 800px;
  padding-top: 4px;
  border: 2px solid black;
  border-radius: 4px;
  padding-left: 4px;
  padding-bottom: 4px;
  padding-right: 4px;
}

.banner{
  background-image: url(http://www.librosweb.es/website/css/images/logo.gif);
  width: 99%;
  margin: auto;
  height: 15%;
  border-radius: 4px;

}

.about{
  display: table;
 margin: 0 auto;
  text-transform: uppercase;
  margin-top: 10px;
  font-family:sans-serif;
  font-weight: bold;
  color: green;

}

.about li{
  display:inline;
  margin: 3px;
  cursor: pointer;
}

.about li:hover{
  background: #f09d28;
  color: #000;

}

.about p{
border-radius: 4px;
display: none;
background-color: #f15647
}

.nav {
  width: 20%;
  height: 32,4%;
  border: 2px solid black;
  border-radius: 4px;
  float: left;
  font-size: 11px;
  font-weight: normal;
  font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
  background-color: #830707;
  color: #333;
}

.nav ul{
  text-align: left;
  padding:0px;
  margin:0px;
}

.nav li{
  word-break: break-word;
  border-bottom: 1px solid;
  margin: 0;
  width: auto;
}

.nav a{
  display: block;
  padding: 3px 0px 3px 0.5em;
  border-left: 7px solid rgb(246, 75, 75);
  border-right: 7px solid rgb(246, 75, 75);
  background-color: #ad1515;
  color: #fff;
  text-decoration: none;
  width: auto;
}


.nav a:hover{
  border-left: 5px solid #800000;
  border-right: 5px solid #800000;
  background-color: #FF7C3E;
  color: #fff;
}



.principal{
  width: 78%;
  height: 81%;
  border: 2px solid black;
  float:right;
  border-radius: 4px;
}
<!DOCTYPE html>
<html lang="es">
    <head>
       <link href="C:\Users\Jorge\Desktop\main.css" rel="stylesheet">
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
       <script type="text/javascript" src="C:\Users\Jorge\Desktop\prueba.js"></script>

       <meta charset="utf-8" />
       <title>Título de esta página</title>
    </head>

    <body>
      <div class="contenedor">
          <div class="banner">
          </div>

          <ul class="about">

                <li>About us  </li>
                <li>Find us  </li>
                <li>Contact</li>
                <p>CACAasd</p>

          </ul>

          <div class="nav">
            <ul>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>

            </ul>


          </div>

          <div class="principal">
          </div>




      </div>
    </body>
</html>
Varulvsnatt
  • 23
  • 3
  • If I understand you correctly, see http://stackoverflow.com/questions/7139208/change-content-of-div-jquery Of course you have to use a selector to match the div by class name instead of id, if that is what you prefer / need. – Lars335 Jan 02 '16 at 03:55
  • `$('.yourElement').on('click', function () { $('.principal').text('Text to insert into principal div'); });` – Sheerforce Jan 02 '16 at 03:56
  • you can also use [html()](http://api.jquery.com/html/) `$('.principal').html('the html for the principal div');` – bansi Jan 02 '16 at 03:58

3 Answers3

0

Include JQuery library and on click of element insert to .principal div following way.

For more information Refer this and this

Use html() or text()

$('#first').on('click', function(){
  
    $('.principal').html("first");
  
  });

 $('#second').on('click', function(){
  
    $('.principal').html("second");
  
  });
 $('#third').on('click', function(){
  
    $('.principal').html("third");
  
  });
body{
   background-color: #018c24
}

li{
  list-style: none;

}

.contenedor{
  background-color: white;
  margin: auto;
  width: 70%;
  height: 800px;
  padding-top: 4px;
  border: 2px solid black;
  border-radius: 4px;
  padding-left: 4px;
  padding-bottom: 4px;
  padding-right: 4px;
}

.banner{
  background-image: url(http://www.librosweb.es/website/css/images/logo.gif);
  width: 99%;
  margin: auto;
  height: 15%;
  border-radius: 4px;

}

.about{
  display: table;
 margin: 0 auto;
  text-transform: uppercase;
  margin-top: 10px;
  font-family:sans-serif;
  font-weight: bold;
  color: green;

}

.about li{
  display:inline;
  margin: 3px;
  cursor: pointer;
}

.about li:hover{
  background: #f09d28;
  color: #000;

}

.about p{
border-radius: 4px;
display: none;
background-color: #f15647
}

.nav {
  width: 20%;
  height: 32,4%;
  border: 2px solid black;
  border-radius: 4px;
  float: left;
  font-size: 11px;
  font-weight: normal;
  font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
  background-color: #830707;
  color: #333;
}

.nav ul{
  text-align: left;
  padding:0px;
  margin:0px;
}

.nav li{
  word-break: break-word;
  border-bottom: 1px solid;
  margin: 0;
  width: auto;
}

.nav a{
  display: block;
  padding: 3px 0px 3px 0.5em;
  border-left: 7px solid rgb(246, 75, 75);
  border-right: 7px solid rgb(246, 75, 75);
  background-color: #ad1515;
  color: #fff;
  text-decoration: none;
  width: auto;
}


.nav a:hover{
  border-left: 5px solid #800000;
  border-right: 5px solid #800000;
  background-color: #FF7C3E;
  color: #fff;
}



.principal{
  width: 78%;
  height: 81%;
  border: 2px solid black;
  float:right;
  border-radius: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">
    <head>
       <link href="C:\Users\Jorge\Desktop\main.css" rel="stylesheet">
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
       <script type="text/javascript" src="C:\Users\Jorge\Desktop\prueba.js"></script>

       <meta charset="utf-8" />
       <title>Título de esta página</title>
    </head>

    <body>
      <div class="contenedor">
          <div class="banner">
          </div>

          <ul class="about">

                <li id="first">About us  </li>
                <li id="second">Find us  </li>
                <li id="third">Contact</li>
                <p>CACAasd</p>

          </ul>

          <div class="nav">
            <ul>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>
              <li><a href="">AAAAAAAAAAA</a></li>

            </ul>


          </div>

          <div class="principal">
          </div>




      </div>
    </body>
</html>
ketan
  • 19,129
  • 42
  • 60
  • 98
0

Use $('ul.about li') selector to select all the li children of parent ul having class about

Use text() method of jQuery which sets or returns the text content of the selected elements.

Try this:

$('ul.about li').on('click', function() {
  $('.principal').text($(this).text());
});
body {
  background-color: #018c24
}
li {
  list-style: none;
}
.contenedor {
  background-color: white;
  margin: auto;
  width: 70%;
  height: 800px;
  padding-top: 4px;
  border: 2px solid black;
  border-radius: 4px;
  padding-left: 4px;
  padding-bottom: 4px;
  padding-right: 4px;
}
.banner {
  background-image: url(http://www.librosweb.es/website/css/images/logo.gif);
  width: 99%;
  margin: auto;
  height: 15%;
  border-radius: 4px;
}
.about {
  display: table;
  margin: 0 auto;
  text-transform: uppercase;
  margin-top: 10px;
  font-family: sans-serif;
  font-weight: bold;
  color: green;
}
.about li {
  display: inline;
  margin: 3px;
  cursor: pointer;
}
.about li:hover {
  background: #f09d28;
  color: #000;
}
.about p {
  border-radius: 4px;
  display: none;
  background-color: #f15647
}
.nav {
  width: 20%;
  height: 32, 4%;
  border: 2px solid black;
  border-radius: 4px;
  float: left;
  font-size: 11px;
  font-weight: normal;
  font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
  background-color: #830707;
  color: #333;
}
.nav ul {
  text-align: left;
  padding: 0px;
  margin: 0px;
}
.nav li {
  word-break: break-word;
  border-bottom: 1px solid;
  margin: 0;
  width: auto;
}
.nav a {
  display: block;
  padding: 3px 0px 3px 0.5em;
  border-left: 7px solid rgb(246, 75, 75);
  border-right: 7px solid rgb(246, 75, 75);
  background-color: #ad1515;
  color: #fff;
  text-decoration: none;
  width: auto;
}
.nav a:hover {
  border-left: 5px solid #800000;
  border-right: 5px solid #800000;
  background-color: #FF7C3E;
  color: #fff;
}
.principal {
  width: 78%;
  height: 81%;
  border: 2px solid black;
  float: right;
  border-radius: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="contenedor">
  <div class="banner">
  </div>

  <ul class="about">

    <li>About us</li>
    <li>Find us</li>
    <li>Contact</li>
    <p>CACAasd</p>

  </ul>

  <div class="nav">
    <ul>
      <li><a href="">AAAAAAAAAAA</a>
      </li>
      <li><a href="">AAAAAAAAAAA</a>
      </li>
      <li><a href="">AAAAAAAAAAA</a>
      </li>
      <li><a href="">AAAAAAAAAAA</a>
      </li>
      <li><a href="">AAAAAAAAAAA</a>
      </li>
      <li><a href="">AAAAAAAAAAA</a>
      </li>
      <li><a href="">AAAAAAAAAAA</a>
      </li>
      <li><a href="">AAAAAAAAAAA</a>
      </li>
      <li><a href="">AAAAAAAAAAA</a>
      </li>
      <li><a href="">AAAAAAAAAAA</a>
      </li>
      <li><a href="">AAAAAAAAAAA</a>
      </li>
      <li><a href="">AAAAAAAAAAA</a>
      </li>
      <li><a href="">AAAAAAAAAAA</a>
      </li>

    </ul>


  </div>

  <div class="principal">
  </div>




</div>
Rayon
  • 36,219
  • 4
  • 49
  • 76
0

It's better to provide an id for the element you want to select. e.g: <li id="about">about</li>

Then use jQuery for click event:

$("#about").on('click',function(){
     //enter code here
});
Blubberguy22
  • 1,344
  • 1
  • 17
  • 29
kiran bhandare
  • 11
  • 3