Question

我正在制作幻灯片，但我却试图让div内容发生变化。我尝试了很多方法，但我无法使其发挥作用。

它应该做的是当我点击一个＆＃34; apartados＆＃34;更改为具有相同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

这里有一些问题：

$(this).attribute("id");正在寻找属性为“id”
<a href="#" data-id="1">使用'data-id'而非'id'
<a href="#" data.id="2">使用'data.id'而非'id'或'data-id'

我的建议是对2和3使用'data-id'并将选择器更改为：$(this).attribute("data-id");

Answer 2

就像@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。我修好了。

Answer 3

有一些html问题..纠正了相同..看看这个小提琴...... https://jsfiddle.net/56rstuhn/

 $(".apartados > div").css("opacity", "0"); //ensure that only the immediate child has opacity set to zero

使用按钮更改div内容

3 个答案: