我正在制作幻灯片,但我一直在尝试更改 div 内容。我尝试了很多方法,但我无法让它发挥作用。
它应该做的是,当我点击一个 时,“apartados”更改为与被点击的 ID 相同的 div。
有HTML代码:
<div class="cajas" id="projects-caja">
<div class="nav">
<ul>
<li><a href="#" data-id="1">Projects</a></li>
<li><a href="#" data-id="2">41744f</a></li>
</ul>
</div>
<div class"apartados">
<div class="div1">
<div class="espacioimagen">
<div class="fancyosop">
<p class="fancytitlep">Projects</p>
</div>
</div>
</div>
<div class="div2" style="opacity:0">
<div class="espacioimagen">
<div class="fancyosop">
<p class="fancytitlep">41744f</p>
</div>
<img src="../uploads/41744f.png" class="fotodeslizante" />
</div>
</div>
</div>
</div>
这里是我正在使用的 Jquery 代码之一:
$(document).ready(function() {
$(".nav ul li a").click(function() {
var id = $(this).attribute("data-id");
$(".apartados div").css("opacity", "0");
$(".div" + id).css("opacity", "1");
});
});
谢谢!
最佳答案
就像@xengravity 提到的所有问题一样,还有很多 HTML 问题。
无论如何,这是一个工作示例:
$(document).ready(function () {
$(".nav ul li a").click(function () {
var target = '.div' + $(this).attr("data-id");
$(".apartados >div").css("opacity", "0");
$(target).css("opacity", "1");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cajas" id="projects-caja">
<div class="nav">
<ul>
<li><a href="#" data-id="1">Projects</a>
</li>
<li><a href="#" data-id="2">41744f</a>
</li>
</ul>
</div>
<div class="apartados">
<div class="div1">
<div class="espacioimagen">
<div class="fancyosop">
<p class="fancytitlep">Projects</p>
</div>
</div>
</div>
<div class="div2" style="opacity:0">
<div class="espacioimagen">
<div class="fancyosop">
<p class="fancytitlep">41744f</p>
</div>
<img src="../uploads/41744f.png" class="fotodeslizante" />
</div>
</div>
</div>
</div>
如您所见,我得到的是 data-id
而不是 id
。
此外,您的 apartados
div 在 class
中缺少一个 =
。我已经修好了。
关于jquery - 使用按钮更改 div 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30330392/