jQuery 사이클 플러그인이 멈추는 인라인 자바 스크립트

Question

저는 jquery와 Javascript가 처음인데 여기 누군가가 해결할 수 있기를 희망하는 문제가 있습니다. div에 일부 내용을 표시하도록 jquery Cycle 플러그인을 설정했습니다. 이제 특정 링크가 다른 div에 다른 콘텐츠를로드하도록했습니다. 로드시 제대로 작동하지만 링크 중 하나를 클릭하고 다른 div에서 내용을로드하면이주기가 작동하지 않습니다. 제발 링크의 href에 인라인 자바 스크립트를 사용하고 있습니다. 그리고 그것은 갈등을 불러 일으키고 있습니다. 내 코드 :

<script type="text/javascript">  
    $(document).ready(function() { 
    $(".paras").cycle({ 
     fx: 'fade', 
     speed: 200, 
     timeout: 1000, 
     next: '.tnext', 
     prev: '.tprev', 
     cleartype: '1' 
     }) 

     content(1); /* To load content 1 on page load */ 

    }); 

    function content(i){ 
     if (i == 1) {/* Code to load content in BIG DIV from external HTML */} 
     if (i == 2) {/* Code to load content in BIG DIV from external HTML */} 
     if (i == 3) {/* Code to load content in BIG DIV from external HTML */} 
    } 
</script> 

<ul> 
    <li><a class="home" href="javascript:content(1)">Home</a></li> 
    <li><a class="work" href="javascript:content(2)">Work</a></li> 
    <li><a class="about" href="javascript:content(3)">About</a></li> 
</ul> 

<div> 
/* This is the big div */ 
</div> 

<div class="paras"> 
/* This is the small div. Content loaded using jquery cycle. Stops cycling when content loaded in BIG DIV */ 
</div> 

누구든지주기를 유지하면서 인라인 자바 스크립트를 그대로 유지하는 방법을 제안 할 수 있습니까? 아니면 더 나은 것을 제안 해주십시오.

Answer 1

사이클 플러그인에 대한 자세한 내용을 모르고 있는지

아니지만, "#", 다음과 같이, 온 클릭에 인라인 조치를 이동하는 세하는 HREF를 변경 시도 :

<script type="text/javascript"> 

$(document).ready(function() { 
    $(".paras").cycle({ 
     fx: 'fade', 
     speed: 200, 
     timeout: 1000, 
     next: '.tnext', 
     prev: '.tprev', 
     cleartype: '1' 
    }); 

    content(1); /* To load content 1 on page load */ 

}); 

function content(i){ 
    if (i == 1) {/* Code to load content in BIG DIV from external HTML */} 
    if (i == 2) {/* Code to load content in BIG DIV from external HTML */} 
    if (i == 3) {/* Code to load content in BIG DIV from external HTML */} 
    return false; 
} 
</script> 

<ul> 
    <li><a class="home" href="#" onclick="return content(1);">Home</a></li> 
    <li><a class="work" href="#" onclick="return content(2);">Work</a></li> 
    <li><a class="about" href="#" onclick="return content(3);">About</a></li> 
</ul> 

<div> 
    /* This is the big div */ 
</div> 

<div class="paras"> 
    /* This is the small div. Content loaded using jquery cycle. Stops cycling when content loaded in BIG DIV */ 
</div> 

더 나은 죽일하는 것 onclicks하고 리스너를 동적으로 적용합니다. 클래스 이름이 이미 고유하므로 1,2,3이 필요하지 않습니다. 귀하의 문제와 관련이 없더라도 다음과 같이하십시오.

<script type="text/javascript"> 

$(document).ready(function() { 
    $("#paras").cycle({ 
     fx: 'fade', 
     speed: 200, 
     timeout: 1000, 
     next: '.tnext', 
     prev: '.tprev', 
     cleartype: '1' 
    }); 

    content("home"); /* To load content 1 on page load */ 


    $('#contentlist li').click(function() { 
     content(this.attr('id')); 
    }); 

}); 


function content(elId){ 

    if (elId == 'home') {/* Code to load content in BIG DIV from external HTML */} 
    else if (elId == 'work') {/* Code to load content in BIG DIV from external HTML */} 
    else if (elId == 'about') {/* Code to load content in BIG DIV from external HTML */} 
    return false; 
} 
</script> 

<ul id="contentlist"> 
    <li><a id="home" href="#">Home</a></li> 
    <li><a id="work" href="#">Work</a></li> 
    <li><a id="about" href="#">About</a></li> 
</ul> 

<div> 
    /* This is the big div */ 
</div> 

<div id="paras"> 
    /* This is the small div. Content loaded using jquery cycle. Stops cycling when content loaded in BIG DIV */ 
</div> 

또한 classNames를 ID로 업데이트했습니다. 이것은 필수는 아니지만 어쨌든 클래스를 고유 한 식별자로 효과적으로 사용하고 있으며 이는 ID가 필요한 것입니다. 그것을 사용하여 선택하는 것이 더 효율적입니다.

마지막으로, "#"을 JavaScript가 아닌 방문자 (특히 검색 엔진)의 URL로 바꾸는 것이 좋습니다.