点击更改div信息

时间：2016-01-02 03:51:06

标签： javascript jquery html css

我正在尝试更改div“principal”的信息，具体取决于您点击“关于我们”“查找我们”和“联系”。比如，当您点击“关于我们”时，请输入一些信息。如果你点击“查找我们”有谷歌地图等，我怎样才能在jQuery上实现这一目标？提前谢谢。

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>

3 个答案:

答案 0 :(得分：0)

包含JQuery库，并按照以下方式单击元素插入.principal div。

有关详细信息，请参阅this和this

使用html()或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>

答案 1 :(得分：0)

使用$('ul.about li')选择器选择父级li的所有ul子级about

使用text() jQuery方法设置或返回所选元素的文本内容。

试试这个：

＆＃13;
＆＃13; 
$('ul.about li').on('click', function() {
  $('.principal').text($(this).text());
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

为您要选择的元素提供ID更好。 例如： <li id="about">about</li>

然后使用jQuery进行点击事件：

$("#about").on('click',function(){
     //enter code here
});
相关问题
最新问题