如何使跨度在单击时出现，但在单击另一个链接时消失

How can you make a span appear on click but dissapear when another link is clicked?

本文关键字：单击 另一个 消失 链接 何使跨      更新时间：2023-09-26

我是javascript的新手，所以请耐心等待。 我正在尝试在单击时显示一个跨度，我已经完成了，但是一旦单击另一个链接，我需要它恢复为隐藏状态。 这就是我目前所拥有的。

<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>
目前，当单击链接 1 时，将显示

app1，然后单击链接 2 后，应用程序 2 将显示在链接 1 的顶部。 当链接 2 关闭时，链接 1 仍然可见。 我需要检查所有 4 个并隐藏除当前选择之外的所有内容。

轻微更新;该函数现在是独立的。

这应该按照你想要的方式工作;它将拉起正确的跨度，如果再次单击它，它将再次隐藏它。

这又是代码：

    <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;
}​

我建议使用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/

欢迎来到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 标签，因为它可以追溯到 DOM Level 1 标准(几乎(达成一致之前的 Web 开发的早期。 相反，建议你绑定到"click"事件 - 这将有助于保持HTML和JavaScript的分离，从而使你的JavaScript更易于阅读和调试。

jQuery使得将处理程序(函数(绑定到click事件变得非常容易，你只需要使用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开发的知识，那么我建议你阅读面向对象的JavaScript，它提供了对该语言及其一些怪癖的出色介绍。

您应该跟踪变量中当前可见的项目(最初是 null (。

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

然后使刚刚单击的范围可见，

并记住它现在是当前可见的项目(除非刚刚单击的项目与到目前为止可见的项目相同 - 在这种情况下，您不应该使任何内容可见并且不再有当前可见的项目(。

我的坏，编辑了答案，它会帮助你。我认为，没有必要使用变量。只需隐藏所有跨度，然后将您传递的跨度显示为变量即可。

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

你现在不应该，但如果你愿意以后尝试，你应该遵循这样的方法。(没有点击标记和更简单的代码(

<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>
相关文章：