只有当我点击我的div链接时，它可能会加载我的进度条？

Question

我有一个链接到我的divmySkills，当我访问我的网页时，我已经加载了酒吧，但我只想加载我的进度条，当我点击我的href到这个divmySkills。 我们该怎么做？

<nav id="menu"> 
    <ul>   
     <li ><a href="#About">About</a></li> 
     <li><a href="#mySkills">Skills</a></li> 
     <li ><a href="#form">Contact</a></li> 
    </ul> 
</nav> 

<div class="mySkills"> 
    <h1>John <span>Skills</span></h1> 
    <div class="skill"> 
     <h6>HTML</h6> 
     <div class="progress_bar orange"> 
      <div style="width: 75%;"></div> 
     </div> 
    </div> 
    <div class="skill"> 
     <h6>CSS</h6> 
     <div class="progress_bar teal"> 
      <div style="width: 67%;"></div> 
     </div> 
    </div> 
    <div class="skill"> 
     <h6>Photoshop</h6> 
     <div class="progress_bar blue"> 
      <div style="width: 80%;"></div> 
     </div> 
    </div> 
    <div class="skill"> 
     <h6>PHP</h6> 
     <div class="progress_bar green"> 
      <div style="width: 55%;"></div> 
     </div> 
    </div> 
    <div class="skill"> 
     <h6>Javascript</h6> 
     <div class="progress_bar yellow"> 
      <div style="width: 55%;"></div> 
     </div> 
    </div> 
</div> 

Answer 1

这里是一个可能的方法对您的请求：

http://jsfiddle.net/pHyz9/

HTML补充说：

<button id="update">Update Values</button> 

CSS：

.skill { 
    display: none; 
} 

.progress_bar div { 
    transition: width 1s; 
} 

使用Javascript（jQuery的）：

$("#update").on("click", function(){ 
    $(".skill").fadeIn(800); 
    $(".orange div").css("width", "75%"); 
    $(".teal div").css("width", "67%"); 
    $(".blue div").css("width", "80%"); 
    $(".green div").css("width", "55%"); 
    $(".yellow div").css("width", "55%"); 
}); 

它使用CSS3，实在是有点不完整，代码可能是更漂亮，但这只是表明有什么可以用这样一个简单的工作的一个示例码。

Answer 2

所以你应该采取以下步骤来实现你的目标。

步骤：

1。使用css隐藏您的<div class="mySkills">。

div.mySkills 
{ 
    display:none; 
} 

2。而就<a href="#mySkills">Skills</a>

$('a[href="#mySkills"]').click(function(e){ 
    e.preventDefault; 
    e.stopPropagation; 

    $('div.mySkills').toggle(); 
}); 

更多关于.toggle（），您可以从here读取。

P.S .:如果我正确理解你的问题和答案，正确地重播评论。我会纠正它。

如果您想查看以下工作示例，请打开link。