通过单击另一个 div 将 class 添加到 div
Adding a class to a div by clicking on another div
我正在尝试建立一个带有侧边栏的网站。当我单击边栏中的某个项目时,我希望显示属于该主题的文本。
到目前为止,我在正文中有这个 html:
<nav class="menu">
<ul>
<li class="kategorie" id="links">
<a href=#>Links</a>
</li>
<li class="kategorie" id="kontakt">
<a href=#>Kontakt</a>
</li>
<li class="kategorie" id="fotos">
<a href=#>Fotostrecke</a>
</li>
</ul>
</nav>
<div class="text">
<h2>
Fotos
</h2>
</div>
以及以下 css:
.menu {
float:left;
width: 300px;
background-color:white;
}
.text {
opacity:0;
float:left;
background-color:white;
position:absolute;
left:350px;
right:0;
text-align:left:;
font-family: Myriad Pro, sans-serif;
}
.visible {
opacity:1;
}
我在头部添加了以下代码:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
$(function() {
$("#fotos").click(function() {
$(".text").addClass('visible');
});
});
</script>
但是还是不行。我仍然是 jquery 的初学者,所以我怀疑这就是错误所在,但我找不到它。
试试这个
$(document).ready(function(){
$(document).on('click','#fotos',function(){
$(document).find('.text').addClass('visible');
});
});
也许这就是问题所在?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#fotos").click(function() {
$(".text").addClass('visible');
});
});
</script>
我正在尝试建立一个带有侧边栏的网站。当我单击边栏中的某个项目时,我希望显示属于该主题的文本。
到目前为止,我在正文中有这个 html:
<nav class="menu">
<ul>
<li class="kategorie" id="links">
<a href=#>Links</a>
</li>
<li class="kategorie" id="kontakt">
<a href=#>Kontakt</a>
</li>
<li class="kategorie" id="fotos">
<a href=#>Fotostrecke</a>
</li>
</ul>
</nav>
<div class="text">
<h2>
Fotos
</h2>
</div>
以及以下 css:
.menu {
float:left;
width: 300px;
background-color:white;
}
.text {
opacity:0;
float:left;
background-color:white;
position:absolute;
left:350px;
right:0;
text-align:left:;
font-family: Myriad Pro, sans-serif;
}
.visible {
opacity:1;
}
我在头部添加了以下代码:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
$(function() {
$("#fotos").click(function() {
$(".text").addClass('visible');
});
});
</script>
但是还是不行。我仍然是 jquery 的初学者,所以我怀疑这就是错误所在,但我找不到它。
试试这个
$(document).ready(function(){
$(document).on('click','#fotos',function(){
$(document).find('.text').addClass('visible');
});
});
也许这就是问题所在?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#fotos").click(function() {
$(".text").addClass('visible');
});
});
</script>