2013-09-03 4 views
0

joomla 기사에서 jquery를 사용하려고합니다.Joomery가 joomla2.5에서 작동하지 않습니다.

내가 그것을 this- 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> 

// 그것은 아니지만에서 jsfiddle에서 잘 작동

.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; 
} 

CSS 내 joomla은 temolate.

내가 한 것은 index.php에 스크립트 파일을 추가하고 article에 내 html 코드를 추가 한 것입니다.CSS가 js가 아닌 제대로 작동합니다.

잠시 동안 고생했다면 도움이 될 것입니다.

+0

이 유 줌라 템플릿은 .js 경로를 추가 한 시도? –

+0

예 스크립트 코드를 index.php에만 추가했습니다. – user2742008

답변

0

<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> 
+0

고마워요,하지만 여전히 작동하지 않습니다. joomla에 jquery.gen의 세대 간 문제가 있다고 생각합니다. joomla에 jquery 코드를 포함시키는 방법을 알려주십시오. – user2742008

+0

주로 두 가지 방법이 있습니다. 템플릿 디렉토리 (js라고 함)에 jquery.js 또는 jquery.min.js를 추가 한 다음 템플릿 index.php 파일에 요소를 추가하거나 Google의 라이브러리 및 템플릿/index.php 파일 헤드에 다음을 추가하십시오. McRui

+0

jquery를 추가했습니다. .min.js하지만 여전히 작동하지 않습니다. Google API에 관해서는 $ doc-> addscript 또는