logo标签列表

当点击一个链接时，如何使一个span出现并在点击另一个链接时消失？

javascriptonclick
3

我刚学习JavaScript，请多包涵。我试图在单击时使一个span出现，我已经实现了这个功能，但我需要在另一个链接被单击后将它隐藏起来。这是我目前的代码。

<html>
<head>
<style>
aside.apps{
    position:relative;
}

span.socialApp{
    visibility:hidden;
    position:absolute;
    top:20px;
    left: 0;
    background-color:#e9e9e9;
}
</style>

<script>
var state = 'hidden'; 

function showApp(a) { 

    if (state == 'visible') { 
        state = 'hidden'; 
    } 
    else { 
        state = 'visible'; 
    } 

    if (document.getElementById && !document.all) { 
        x = document.getElementById(a); 
        x.style.visibility = state; 
    } 
} 
</script>
</head>

<body>

        <aside class="apps">
            <a href="javascript://" onclick="showApp('app1');">link1</a>
                <span class="socialApp" id="app1">stuff goes here1</span>
            <a href="javascript://" onclick="showApp('app2');">link2</a>
                <span class="socialApp" id="app2">stuff goes here2</span>
            <a href="javascript://" onclick="showApp('app3');">link3</a>
                <span class="socialApp" id="app3">stuff goes here3</span>
            <a href="javascript://" onclick="showApp('app4');">link4</a>
                <span class="socialApp" id="app4">stuff goes here4</span>
        </aside>
</body>
</html>

目前，当点击link1时，app1会出现，然后再点击link2时，app2会覆盖在link1上面。当关闭link2后，link1仍然可见。我需要检查所有4个元素，并使除当前选择外的所有元素隐藏起来。

欢迎来到SO！很棒的第一个问题，但是如果您确保正确缩进代码，那么会有更多人想要回答它，因为这样更容易阅读。 - Jivings
5个回答
2

稍作更新；该函数现在是自包含的

这应该按您想要的方式工作；它将找出正确的并再次隐藏它，如果再次单击

以下是代码：

    <aside class="apps" id="aside">
        <a href="#" onclick="showApp('app1');">link1</a>
            <span class="socialApp" id="app1">stuff goes here1</span>
        <a href="#" onclick="showApp('app2');">link2</a>
            <span class="socialApp" id="app2">stuff goes here2</span>
        <a href="#" onclick="showApp('app3');">link3</a>
            <span class="socialApp" id="app3">stuff goes here3</span>
        <a href="#" onclick="showApp('app4');">link4</a>
            <span class="socialApp" id="app4">stuff goes here4</span>
    </aside>

​

function showApp(a) {
    var aside = document.getElementById('aside');
    var arr = aside.getElementsByTagName('span');
    for (i = 0; i < arr.length; i++) {
        if (arr[i].getAttribute('id') != a) {
            arr[i].style.visibility = 'hidden';
        }
    }
    var state;
    x = document.getElementById(a);
    if (x.style.visibility == 'visible') {
        state = 'hidden';
    }
    else {
        state = 'visible';
    }
    x.style.visibility = state;
}​
请注意，您可以（并且应该）将state2设置为局部变量，因为您从未在showApp的调用之间使用它的值。 - sepp2k
@sepp2k 我刚刚意识到这一点，现在该函数已经是自包含的了。 - Daedalus
2
我建议使用JQuery。它具有跨浏览器支持，并且可以轻松处理这类问题 ;).
在您的标签中包含以下内容。
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

这是新的脚本。

<script type="text/javascript">
    function showApp(a) {
        $(".selected").removeClass("selected");
        $(a).addClass("selected");
    };
</script>

将你的 HTML 更改为以下内容：

<aside class="apps">
    <a href="#" onclick="showApp('#app1');">link1</a>
        <span class="socialApp" id="app1">stuff goes here1</span>
    <a href="#" onclick="showApp('#app2');">link2</a>
        <span class="socialApp" id="app2">stuff goes here2</span>
    <a href="#" onclick="showApp('#app3');">link3</a>
        <span class="socialApp" id="app3">stuff goes here3</span>
    <a href="#" onclick="showApp('#app4');">link4</a>
        <span class="socialApp" id="app4">stuff goes here4</span>
</aside>

将您的CSS更改为以下内容

.apps{
    position:relative;
}

.socialApp{
    visibility:hidden;
    position:absolute;
    top:20px;
    left: 0;
    background-color:#e9e9e9;
}

.selected {
    visibility: visible;   
}

JSFiddle示例：http://jsfiddle.net/peterf/u2SFL/

该示例是JSFiddle网站上的一个链接，可以让你查看和编辑一个示例代码，并且还能够在浏览器中运行该代码。
不应该建议那些第一行是“我刚开始学习javascript，请多多关照”的人使用jQuery。 - Jashwant
1

抱歉，我编辑了答案，希望对您有所帮助。我认为不需要使用变量，只需要隐藏所有的标签，然后显示您传递的那一个即可。

<html>
<head>
<style>
aside.apps{
    position:relative;
} 
span.socialApp{
    visibility:hidden;
    position:absolute;
    top:20px;
    left: 0;
    background-color:#e9e9e9;
}
</style>

<script>  
function showApp(a) { 
    var aside = document.getElementById('myaside');
    var spans = aside.getElementsByTagName('span');
    for(i=0,len=spans.length;i<len;i++){
     spans[i].style.visibility = 'hidden';
    }
    x = document.getElementById(a);  
    x.style.visibility = 'visible';  
}

</script>
</head>

<body>

        <aside class="apps" id="myaside">
            <a href="javascript://" onclick="showApp('app1');">link1</a>
                <span class="socialApp" id="app1">stuff goes here1</span>
            <a href="javascript://" onclick="showApp('app2');">link2</a>
                <span class="socialApp" id="app2">stuff goes here2</span>
            <a href="javascript://" onclick="showApp('app3');">link3</a>
                <span class="socialApp" id="app3">stuff goes here3</span>
            <a href="javascript://" onclick="showApp('app4');">link4</a>
                <span class="socialApp" id="app4">stuff goes here4</span>
        </aside>
</body>
</html>

更新：

由于您刚接触JavaScript，不要急着学习jQuery，因为这样做可能会让别人帮你写代码。但是所有优秀的JavaScript开发者都建议您在学习框架之前先学习JavaScript。

此外，jQuery的存在是为了简化代码、分离标记和JavaScript。

您现在不需要这样做，但如果您愿意尝试，可以采用以下方法（不在标记中使用onclick，代码更简单）。

<html>
<head>
<style>
aside.apps{
    position:relative;
} 
span.socialApp{
    display:none;
    position:absolute;
    top:20px;
    left: 0;
    background-color:#e9e9e9;
}
</style>
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script>
 $(document).ready(function(){
    $('aside').on('click','a',function(){      // This lines says that select aside and fire onclick even on click of anchor tag inside it
        $(this).parent().find('span').hide();    // $(this) is the clicked anchor
        $(this).next('span').show();    // Find the span next to clicked anchor and show it i.e. display:block
    })
 })

</script>
</head> 
<body> 
<aside class="apps">
    <a href="javascript:void(0);">link1</a>
        <span class="socialApp" id="app1">stuff goes here1</span>
    <a href="javascript:void(0);" >link2</a>
        <span class="socialApp" id="app2">stuff goes here2</span>
    <a href="javascript:void(0);" >link3</a>
        <span class="socialApp" id="app3">stuff goes here3</span>
    <a href="javascript:void(0);" >link4</a>
        <span class="socialApp" id="app4">stuff goes here4</span>
</aside> 
</body>
</html>
感谢您的回复，但是由于某种原因，每隔一次点击会拉取<span id="app4">而不是所点击的那个。 - JKFrox
1
@JKFrox 这是因为每隔一次点击（无论你点击什么），visibility 都会变为 "visible"，所有的 span 都会显示出来。由于 app4 是最后一个，它会出现在其他 span 的上面。对于多个 span 来说，只有一个 state 变量是行不通的。 - sepp2k
1

欢迎来到Stack Overflow！

首先，我建议您使用jQuery来辅助您的JavaScript。jQuery（以及其他类似的框架，如Zepto、MooTools和Dojo）可以弥补JavaScript中的一些缺陷，例如跨浏览器不一致性，并且会使事情变得更加容易。要在项目中包含jQuery，您只需要在页面的<head>标签中添加以下内容：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

现在您已经可以访问jQuery，您可以删除所有添加到<a>标签的onclick属性。使用onclick标签是不鼓励的，因为它追溯到Web开发早期，在DOM Level 1标准（几乎）达成之前。相反，建议您绑定到“click”事件-这将有助于保持HTML和JavaScript分离，从而使您的JavaScript更易于阅读和调试。

jQuery使绑定处理程序（函数）到单击事件变得非常容易，您只需要使用{{link1：on}}语法：

// #id is the 'id' attribute of the element you want to add a click handler to.
$('#id').on('click', function () { alert("Clicked!"); });

jQuery还提供了一种快速简便的方式，通过show和hide来显示和隐藏页面上的元素，以下是它的工作原理：

// Again, #id is the id attribute of the element you want to show/hide.
$('#id').show();    // Make a hidden element visible.
$('#id').hide();    // Hide a visible element.

这里需要注意的是，当你使用jQuery“隐藏”一个元素时，它实际上是设置了该元素的display CSS属性。在你上面的代码中，你是通过切换visibility属性来隐藏元素的。
答案的最后一部分在于我们如何确定当前可见的元素；这可以通过添加一个新变量来实现，该变量跟踪正在显示的元素 - 你可以在我修改后的代码中看到这一点。
<html>
    <head>
        <style>
span.socialApp {
    /* use display: none instead of visibilty: hidden */
    display: none;

    position:absolute;
    top:20px;
    left: 0;
    background-color:#e9e9e9;
}
        </style>

        <!-- include jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

        <!-- Script for toggle apps -->
        <script>
// Create an Array of all the app names.
var apps = [ 'app1', 'app2', 'app3' ];

// Variable which keeps track of which app is currently visible
var visibleAppName = null;

function onLinkClicked(event) {
    // Get the id of the link that was clicked.
    var linkName = event.target.id;

    // Strip off the '-link' from the end of the linkName
    var dashIndex = linkName.indexOf('-link');
    var appName = linkName.substr(0, dashIndex);

    // Call show app with the correct appName.
    showApp(appName);
}

function showApp(appNameToShow) { 
    // Hide the currently visible app (if there is one!)
    if (visibleAppName !== null) {
        $('#' + visibleAppName).hide();
    }

    // And show the one passed
    $('#' + appNameToShow).show();

    // Update the visibleApp property.
    visibleAppName = appNameToShow;
}

// $(document).ready waits for the page to finish rendering
$(document).ready(function () {
    // Walk through the Array of Apps and add a click handler to
    // it's respective link.
    apps.forEach(function(name) {
        $('#' + name + '-link').on('click', onLinkClicked);
    });
});         
        </script>
    </head>
    <body>
            <aside class="apps">
            <a href="#" id="app1-link">link1</a>
            <span class="socialApp" id="app1">stuff goes here1</span>

            <a href="#" id="app2-link">link2</a>
            <span class="socialApp" id="app2">stuff goes here2</span>

            <a href="#" id="app3-link">link2</a>
            <span class="socialApp" id="app3">stuff goes here3</span>            
        </aside>
    </body>
</html>​​​​​​​​​​​

如果您想了解更多关于JavaScript开发的知识，我建议阅读Object Orientation JavaScript，它提供了对该语言及其一些特点的优秀介绍。
不建议向第一次接触 JavaScript 的人推荐 jQuery。 - Jashwant
为什么不呢？你宁愿让他们学习各种不同的附加点击事件侦听器的方式，而不是解决他们实际的问题吗？ - JonnyReeves
1
我是jQuery的粉丝。实际上，我必须测试自己的纯JavaScript代码，因为我不这样编码。但学习是一个渐进的过程。如果你一开始就建议他使用jQuery，他就不会学习JavaScript了。也许永远不会尝试其他框架。此外，你不能总是依赖jQuery。你需要了解JavaScript的方式。 - Jashwant
1

你应该用一个变量来跟踪当前可见的项目（最初为null）。

每次调用showApp时，隐藏当前可见的项目。

然后使刚刚被点击的span可见，并记住它现在是当前可见的项目（除非刚刚被点击的是到目前为止可见的相同项目 - 在这种情况下，您不应该使任何东西可见，也不再有当前可见的项目）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接