jQuery在joomla2.5中不起作用

Question

我正在我的joomla文章中尝试使用jquery。

我正在尝试执行的操作-http: //jsfiddle.net/bhaveshj21/BYgaq/

<script>
$("#myul > li").click(function(){
    $('li').each(function(){
        var data = $(this).find('a').attr('href');
        $(data).css({'display' : 'none'});
    });
    var curr = $(this).find('a').attr('href');
    $(curr).css({'display' : 'block'}).find('img').animate(
        {
            'width' : '100%',
            'height' : 'auto'
        },
        1000
    );
});</script>

html代码是

<div class="menu">
<ul id = "myul">
    <li><a href="#1" id="all">all</a></li>
    <li><a href="#2" id="joomla">joomla</a></li>
    </ul>
</div>
<div class="image" id='1'>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRgMHchGIXBuBlMQHUfdTvzpuAaC43tSq3SYgHAsbXNr2TUQwhLYRu8yuSf"/>
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHHRfptpToJ6GqtsSatdZ-vh36VrIXWokRdYSnc4FEkHncQHLHpw" />

</div>
<div class="images" id='2'>
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSLyEyENGyUVfnLMOPFVAT5gRQw8Mc_koSZWMfrdQLohY8cL1RDGeXKjnRO" />
    </div>

// css

.menu
{
    width:100%
        float:left;
}
.menu a{
    background-color:lightblue;
    border-radius:8px 8px 8px 8px;
    margin-right:10px;
    padding-top:10px;
    padding-left:10px;
    padding-bottom:5px;
    color:black;
    padding-right:30px;
}
.menu li
{
    display:inline;
}
.menu a:hover
{
    background-color:white;
}
.image
{
    display:none;

}
.images
{
    display:none;
}

它在jsfiddle中工作正常，但在我的joomla temolate中却无法正常工作。

我所做的是我在index.php中添加了脚本文件，并在文章中添加了html代码。 CSS工作正常而不是JS。

卡住一会儿会不会有帮助？

Answer 1

尝试

<head>
<!--- the head elements -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>    
</head>
<script type="text/javascript>
    (function($){
        $(document).ready(function(){
            $("#myul > li").on("click", function(){
                $('li').each(function(){
                    var data = $(this).find('a').attr('href');
                    $(data).css({'display' : 'none'});
                });
                var curr = $(this).find('a').attr('href');
                $(curr).css({'display' : 'block'}).find('img').animate(
                    {
                        'width' : '100%',
                        'height' : 'auto'
                    },
                    1000
                );
            })
        });
    })(jQuery);
</script>

jQuery在joomla2.5中不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-09-03 11:19:10

jQuery在joomla2.5中不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-09-03 11:19:10

解决方案1
0 已采纳 2013-09-03 11:19:10