单击列表项时加载div
我有个问题。我正在制作一个网页设计网站，在一个div有一个装载机，你可以看到我的技能是什么。这是个动画片。问题是当你在网站上的时候，加载程序已经加载了。但我希望它加载时，你点击列表项目‘技能’。这是第三项名为#blok3 3的列表。
<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>下面是技能加载器的脚本。你可以看到在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
当我使用来自克里什R的代码时，加载程序看起来如下(请看下面的图片)。有更多的圆圈出现，但它开始加载当你点击技能，所以这是好的部分。当然，我不需要双圈;)
http://nl.tinypic.com/view.php?pic=1690txz&s=8#.U2T5Va00SjU
回答 3
Stack Overflow用户
发布于 2014-05-03 10:44:09
当单击列表项时，您应该将代码放在调用(执行)的函数中，以使圆圈动画化.因为$( 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 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>Stack Overflow用户
发布于 2014-05-03 10:22:35
你能试试这个吗
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>Stack Overflow用户
发布于 2014-05-03 10:23:03
也许这对你有用..。
在html中
<li id="blok3"><a href="#blok3">Skills</a></li>在你的javascript
$('#blok3').click(function () { $('#myStat3').circliful(); });https://stackoverflow.com/questions/23443098
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号