Question

我有一个问题。我正在制作一个单页设计网站，在一个div中有一个装载机，你可以看到我的技能是什么。这是一个动画圈。问题是，当您在网站上时，加载程序已经加载。但是当我点击列表项＆＃39; Skills＆＃39;时，我希望它加载。这就是第三个名为＃blok3的列表项。

<div id="menu">

        <ul>
            <li><a href="#blok1">Home</a></li>
            <li><a href="#blok2">About</a></li>
            <li><a href="#blok3">Skills</a></li>
            <li><a href="#blok4">Portfolio</a></li>
            <li><a href="#blok5">Contact</a></li>
        </ul>

</div>

以下是技能加载器的脚本。 Als你可以在Javascript部分看到有5个id，但在下面我推了一个，因为其他5个都是相同的，除了名字#myStat ......

<div class="statistic">
  <div id="myStat1" data-dimension="150" data-text="Ai" data-info="" data-width="15" data-fontsize="38" data-percent="85" data-fgcolor="#FFF" data-bgcolor="#A7E3E7"></div>
  <div class="statistic-text">Illustrator</div>  
</div>

<script>
$( document ).ready(function() {
        $('#myStat1').circliful();
        $('#myStat2').circliful();
        $('#myStat3').circliful();
        $('#myStat4').circliful();
        $('#myStat5').circliful();
        $('#myStat6').circliful();
    });
</script>

我用我所拥有的知识尝试了一些东西，但它没有用。我希望有一个人可以帮助我。谢谢:)）

当我不使用任何代码时，加载程序看起来像这样：

http://nl.tinypic.com/view.php?pic=rh1ydc&s=8#.U2T5OK00SjU

当我使用Krish R的代码时，加载程序看起来像这样（见下图）。出现了更多的圆圈，但是当你点击技能时它会开始加载，这是很好的部分。但我当然不需要双圈;）

http://nl.tinypic.com/view.php?pic=1690txz&s=8#.U2T5Va00SjU

Answer 1

你能试试吗，

使用Javascript：

    $( document ).ready(function() {            
        Loadcircliful();
        $("#myskills").click(function(){
            Loadcircliful();
            return false;
        });
    });

    function Loadcircliful(){           
        $('#myStat1, #myStat2, #myStat3, #myStat4, #myStat5, #myStat6').circliful();
    }

in html，

    <li><a href="#blok3" id="myskills">Skills</a></li>

Answer 2

这可能对你有用......

你的HTML中的

  <li id="blok3"><a href="#blok3">Skills</a></li>

在你的javascript中

  $('#blok3').click(function () {  $('#myStat3').circliful(); });

Answer 3

当单击列表项时，您应该将代码设置为在调用（执行）的函数中为圆圈设置动画...因为$( document ).ready(function()表示您的代码应在页面加载的瞬间执行！：d

例：

代码：

<!doctype html>

<html lang="en">

<head>

<title>Circle</title>
<script>
function skill()
{
    // the code to animate circle
    alert('animated circle!');
}
</script>
</head>
<body>
<div id="menu">

    <ul>
        <li><a href="#blok1">Home</a></li>
        <li><a href="#blok2">About</a></li>
        <li>
        <a onclick = "skill()" href="#blok3">
        Skills
        </a>
        </li>
        <li><a href="#blok4">Portfolio</a></li>
        <li><a href="#blok5">Contact</a></li>
        </ul>
</body>
</html>

测试： Firefox 24，Google Chrome 34

的更新
由于我们无法访问圈子动画代码，因此我们可以完全删除它，当点击Skills时，我们会动态地使用JavaScript innerHTML。
示例：

<!DOCTYPE html> <html lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <title>Circle</title> <script> function skill() { var anim = document.getElementById('anim'); anim.innerHTML = '<div id="myStat1" data-dimension="150" data-text="Ai" data-info="" `data-width="15" data-fontsize="38" data-percent="85" data-fgcolor="#FFF" data-bgcolor="#A7E3E7"></div><div class="statistic-text">Illustrator</div> ';` $('#myStat1').circliful(); $('#myStat2').circliful(); $('#myStat3').circliful(); $('#myStat4').circliful(); $('#myStat5').circliful(); $('#myStat6').circliful(); } </script> </head> <body> <div id="menu"> <ul> <li><a href="#blok1">Home</a></li> <li><a href="#blok2">About</a></li> <li onclick = "skill()"> <a onclick = "skill()" href="#blok3"> Skills </a> </li> <li><a href="#blok4">Portfolio</a></li> <li><a href="#blok5">Contact</a></li> </ul> <div class="statistic" id = "anim"> </div> </body> </html>

单击列表项时加载div

3 个答案: