Javascript 单击列表项时加载div_Javascript_Function_Onclick

Javascript 单击列表项时加载div

javascript function

Javascript 单击列表项时加载div,javascript,function,onclick,Javascript,Function,Onclick,我有个问题。我正在制作一个单页设计的网站，在一个分区中有一个加载程序，你可以看到我的技能是什么。这是一个充满活力的圆圈。问题是当你在网站上时，加载程序已经加载了。但我希望在您单击列表项“技能”时加载它。这是第三个名为#blok3的列表项下面是技能加载器的脚本。你可以在Javascript部分看到有5个id，但在下面我放了一个，因为其他5个都是相同的，除了名称#myStat <div class="statistic"> <div id="myStat1"

我有个问题。我正在制作一个单页设计的网站，在一个分区中有一个加载程序，你可以看到我的技能是什么。这是一个充满活力的圆圈。问题是当你在网站上时，加载程序已经加载了。但我希望在您单击列表项“技能”时加载它。这是第三个名为#blok3的列表项

下面是技能加载器的脚本。你可以在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>


插图画家
$（文档）.ready（函数（）{
$（'#myStat1'）。循环（）；
$（'#myStat2'）。循环（）；
$（'#myStat3'）。循环（）；
$（'#myStat4'）。循环（）；
$（'#myStat5'）。循环（）；
$（'#myStat6'）。循环（）；
});

我用我所掌握的知识尝试了一些事情，但没有成功。我希望有人能帮助我。谢谢：）

当我不使用任何代码时，加载程序如下所示：

当我使用Krish R的代码时，加载程序如下所示（请看下图）。出现了更多的圆圈，但是当你点击技能时，它开始加载，所以这是好的部分。但我当然不需要双圈；）

你能试试这个吗

Javascript:

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

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

在html中

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

这可能适合您

在html中

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

当单击列表项时，您应该在一个被调用（执行）的函数中设置圆动画的代码。。。As

$（document）.ready（function（）

意味着您的代码应该在页面加载时执行！：D

例子：

代码：

我们在这里看不到javascript代码与html的关系。请尝试用尽可能少的代码重现问题，并在问题中发布代码。谢谢你的回答。我试过了，当我单击“技能”时，它开始加载，但加载程序彼此重叠。我不知道为什么。因此，当我再次单击“技能”时，它会重新加载e圆圈出现。你能给JSFIDLE提供圆圈代码吗？我不确定是什么问题。我用JSFIDLE试过，但效果不太好。我不知道如何解释。谢谢你的回答。我试过了，但没有效果。不，没有，只是给你一个继续的方法。你必须努力阅读代码，理解它并对其进行修改以将其包含在代码中。谢谢您的评论。我尝试了此代码，但似乎什么也没有发生。当我单击“技能”时，圆圈已加载。@user3598842然后请接受我的答案（单击其上的勾号图标），以便其他用户可以看到它…很高兴我提供了帮助：）

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

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

<!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>

<!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>