我正在尝试根据您是否单击“关于我们”、“查找我们”和“联系方式”来更改有关 div“主体”的信息。比如，当你点击“关于我们”时，输入一些信息。如果你点击“找到我们”有一个谷歌地图等。我怎样才能在 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>最佳答案
使用 $('ul.about li') 选择器选择父级 ul 具有类 about 的所有 li 子级
使用jQuery的text()方法设置或返回被选元素的文本内容。
试试这个:
$('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>关于javascript - 更改div信息onclick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34562421/