Question

在我的网站上，我使用id="bigger"创建了几个div。这个div应该放大div id="text"并在下一个subweb内加载（使用ajax）。这是我的代码的一部分：

        /*ajax*/
    function ajax(src, cont){
            $.ajax({
                url: src,
                context: document.body,
                success: function(responseText) {
                    $(cont).html(responseText);
                    $(cont).find("script").each(function(i) {
                        eval($(this).text());
                    });
                }
            });
    }

    /*bigger div*/
    $(document).ready(function(){
        $('div#bigger').click(function(){
            $("#text").animate({ 
            width: "1050px",
            left:"150px",
            padding:"0"
            }, 1500 );
            $('#infbox').css('display','none');
        })
    })
    <!--it's work-->
                            <div id="bigger" onClick="ajax('gallery.php', '#text')" class="slide">
                            <span id="galdesc"><p>G<br />A<br />L<br />E<br />R<br />I<br />A</p></span>
                            <img src="img/slideshow/galler2y.png" class="img" />
                        </div>
                        <div id="bigger" onClick="ajax('website.php', '#text')" class="slide">
                            <span id="webdesc"><p>S<br />T<br />R<br />O<br />N<br />Y<br /><br />W<br />W<br />W</p></span>
                            <img src="img/slideshow/website.png" class="img" />
                        </div>
                        <div id="bigger" onClick="ajax('applications.php', '#text')" class="slide">
                            <span id="webdesc"><p>P<br />R<br />O<br />G<br />R<br />A<br />M<br />Y</p></span>
                            <img src="img/slideshow/applications.png" class="img" />
                        </div>
                </div>
            </div>
        </div>
        <div id="cont">
            <div id="menu" onClick="ajax('textpl.txt','#text')"><p>MENU</p></div>
            <div id="teleadr">
                <p>e-mail:<a   href="mailto:makowskaewa@o2.pl"> makowskaewa&#64;o2.pl</a>&nbsp; &#124; &nbsp; tel: 607079560</p>
            </div>
            <div id="infbox">
                <div id="inf">
                    <p>NA STRONIE:</p>
                    <ul>
<!--this three not work on Opera and Chrome-->
                        <li><div id="bigger" onClick="ajax('gallery.php','#text')"><p>galeria</p></div></li>
                        <p>Moje prace wykonane głównie przy wykorzystaniu programów graficznych takich jak Photoshop, Gimp oraz Blender.</p><br />
                        <li><div id="bigger" onClick="ajax('website.php','#text')"><p>webmastering</p></div></li>
                        <p>Stworzone przeze mnie strony www.</p><br />
                        <li><div id="bigger" onClick="ajax('applications.html','#text')"><p>programowanie</p></div></li>
                        <p>Kilka prostych programów napisanych przy wykorzystaniu php oraz baz danych.</p>
                    </ul>
                </div>
            </div>
            <div id="text">

在Firefox上一切正常，但是当我使用Opera或Chrome时，我只能使用三个第一个div id="text"。当我尝试使用第二个三个div时，它应该加载与早期div相同的subweb，没有反应。甚至伪类:hover都不起作用，而firebug似乎也看不到这些元素。我尝试将id="bigger"更改为class="bigger"，并尝试将jquery连接到一个ID而不是每个div的几种方法。

我不知道该怎么做，也许有人可以帮助我。我希望我能正确地写出一切，因为我的英语并不完美。

Answer 1

每个ID在该页面上必须是唯一的。拥有相同ID的多个元素会给你带来麻烦，无论如何。

如果你再次更改你的div而不是class="bigger"而不是id="bigger"然后你调整了你的代码，你应该已经进一步了解：

$(document).ready(function(){
        $('div.bigger').click(function(){
            $("#text").animate({ 
            width: "1050px",
            left:"150px",
            padding:"0"
            }, 1500 );
            $('#infbox').css('display','none');
        })
    })

确保#text ID也是唯一的！如果它不是唯一的，它将无法工作！ #infobox

也是如此

您还应该使用<div id="text">关闭</div>，但这可能只是您的示例代码被剪得太紧。

Global standard of ID attribute

Answer 2

问题解决了。这是错误的CSS。 #infbox有位置：绝对和z-index：-1，所以它被另一层覆盖，我做了，因为那时jquery效果看起来更好。删除z-index后：-1一切正常，看起来没问题。

jquery事件不适用于Opera和Chrome上的许多div

2 个答案: