jquery - 使用按钮更改 div 内容

Question

我正在制作幻灯片，但我一直在尝试更改 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"); 
    });
});

谢谢!

Answer 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 中缺少一个 =。我已经修好了。