外部JavaScript函数编辑HTML列表标题

时间:2014-06-10 20:27:01

标签: javascript jquery html

所有

我正在制作登录页面。成功登录后,登录用户的用户名应显示在屏幕顶部。点击用户名后,会出现一个下拉列表。

所以我有一个HTML脚本会创建一个无序列表。我想在HTML中调用外部javaScript函数。我希望此函数使用javascript函数中处理的自定义输入编辑无序列表的标题,并使列表可见,因为默认情况下不显示。如何编辑此脚本以便我可以调用该函数为我的无序列表创建自定义标题?

的Javascript

function successfulLogin() { 
    $("#UserDropdown").show();
    document.getElementById("loginMenu").innerHTML = "my stuff";

}

HTML

<script src="~\Scripts\successfulLogin.js" style="display: none"></script>

<div id="dropboxbackground">
<div>
<ul id="dropdown">
    <li>
        <a id="loginMenu" href="#">title</a>
        <ul>
            <li><a href="#">Account Settings</a></li>
            <li><a href="#">Logout</a></li>
        </ul>
    </li>
</ul>
</div>
<header>
    <div id="headerBar"></div>
</header>

1 个答案:

答案 0 :(得分:1)

在锚标记内创建标签,点击用户名后,使用href = &#39; javascript:successfulLogin()&#39; 调用 successfulLogin javascript方法或者取决于您用于显示用户名的控件类型。

<script src="~\Scripts\successfulLogin.js" style="display: none"></script>
<div>
<ul id="dropdown">
<li>
    <a id="loginMenu" href='#'><label id="lbl"> title
     </label></a>
    <ul>
      <li><a href="#">Account Settings</a></li>
        <li><a href="#">Logout</a></li>
    </ul>
</li>
</ul>
</div>

并将您的javascript(jquery)写为:这会将有序列表的标题更改为&#34; somestuff&#34;

function successfulLogin() { 
$("#UserDropdown").show();
$('#lbl').text("somestuff");

 }