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

我有一个指向我的

div

mySkills

的链接，当我访问我的页面时，我会加载进度条，但当我点击我的

href

到这个

div

mySkills

时，我只想加载进度条。 我们怎么能做到呢

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

约翰·斯奇尔斯
HTML
CSS
Photoshop
PHP
Javascript

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

步骤：

1

。使用css隐藏您的

div.mySkills
{
  display:none;
}

2

。在

有关可从中读取的.toggle（）的详细信息

附言：如果我正确理解了你的问题和答案，请用评论适当重播。我会改正的

如果您想看到下面打开的工作示例

---

以下是处理您的请求的可能方法：

HTML添加：

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

.skill {
    display: none;
}

.progress_bar div {
    transition: width 1s;
}

$("#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%");
});

Javascript（jQuery）：

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

.skill {
    display: none;
}

.progress_bar div {
    transition: width 1s;
}

$("#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，有点不完整，代码可能会更漂亮，但这只是一个示例，说明了如何使用如此简单的代码。

你的“”href链接标记在哪里？谢谢你的回答，我用它更新了我的帖子。步骤1应该在单独的css文件中或样式标记内。步骤2应该在单独的js文件中，该文件将在jquery之后和文档准备就绪时加载。或者在你的html文件中，在结束正文的标记之前，把脚本标记放在里面，你应该把document.ready处理程序放在里面，你应该把步骤2的代码放在里面。我更新了我的答案，有一个工作示例，看看它，回答是你想要的吗？我想我解释得很糟糕，对不起。我想，当我点击“技能”链接时，我想进入div“mySkills”，然后想看到在我到达mySkills div的那一刻加载的条！谢谢你的帮助！但我要找的是关于antindexer的帖子。如果你得到了帮助和回复，这对你是有好处的。所以这只是你们提问旅程的开始。所以没有人是完美的。没关系。我希望你能尽快提高你的技能。：）谢谢，这正是我想要的：）