Javascript 如何使跨度在单击时显示，但在单击另一个链接时消失？_Javascript_Onclick

Javascript 如何使跨度在单击时显示，但在单击另一个链接时消失？

javascript

Javascript 如何使跨度在单击时显示，但在单击另一个链接时消失？,javascript,onclick,Javascript,Onclick,我对javascript是全新的，所以请容忍我。我试图得到一个跨度出现在点击我已经完成，但我需要它返回到被隐藏后，另一个链接被点击。这就是我目前所拥有的 <html> <head> <style> aside.apps{ position:relative; } span.socialApp{ visibility:hidden; position:absolute; top:20px; left: 0; ba

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


apps{
位置：相对位置；
}
span.socialApp{
可见性：隐藏；
位置：绝对位置；
顶部：20px；
左：0；
背景色：#e9e9e9；
}
变量状态='隐藏'；
函数showApp（a）{
如果（状态=='可见'）{
状态='隐藏'；
} 
否则{
状态='可见'；
} 
如果（document.getElementById&！document.all）{
x=document.getElementById（a）；
x、 style.visibility=状态；
} 
} 
这里有东西
这里有东西
这里有东西
这里有东西

当前单击link1时，会显示app1，单击link2后，app2会显示在link1上方。当link2关闭时，link1仍然可见。我需要检查所有4个选项，并将所有选项隐藏起来，但当前选择除外。

我的错，编辑了答案，这将对您有所帮助。我认为，没有必要使用变量。只需隐藏所有跨距，然后显示作为变量传递的跨距

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


apps{
位置：相对位置；
} 
span.socialApp{
可见性：隐藏；
位置：绝对位置；
顶部：20px；
左：0；
背景色：#e9e9e9；
}
函数showApp（a）{
var aside=document.getElementById（'myaside'）；
var span=aside.getElementsByTagName（'span'）；
对于（i=0，len=span.length；i您应该跟踪变量中当前可见的项（最初为null
）
每次调用showApp
时，隐藏当前可见的项目
然后使刚刚单击的范围可见，并记住它现在是当前可见的项目（除非刚刚单击的范围与当前可见的范围相同-在这种情况下，您不应使任何内容可见，并且不再有当前可见的项目）
；它将拉起正确的跨度，如果再次单击，它将再次隐藏
下面是代码：
    <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>


这里有东西
这里有东西
这里有东西
这里有东西


函数showApp（a）{
var aside=document.getElementById（'aside'）；
var arr=aside.getElementsByTagName（'span'）；
对于（i=0；i
欢迎来到堆栈溢出
首先，我建议您使用帮助您使用JavaScript。jQuery（以及其他类似的框架，如Zepto、MooTools和Dojo）解决了JavaScript中的一些漏洞，如和will。要将jQuery包含在项目中，您只需在页面的
标记中添加以下内容：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

jQuery还提供了一种快速简便的方式，通过和显示和隐藏页面上的元素，下面介绍它的工作原理：
// 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>


span.socialApp{
/*使用“显示：无”代替“可见性：隐藏”*/
显示：无；
位置：绝对位置；
顶部：20px；
左：0；
背景色：#e9e9e9；
}
//创建所有应用程序名称的数组。
变量apps=['app1'、'app2'、'app3']；
//变量，用于跟踪当前可见的应用程序
var visibleAppName=null；
函数onLinkClicked（事件）{
//获取已单击的链接的id。
var linkName=event.target.id；
//从linkName的末尾去掉'-link'
var dashIndex=linkName.indexOf（'-link'）；
var appName=linkName.substr（0，dashIndex）；
//使用正确的appName调用show app。
showApp（appName）；
}
函数showApp（appNameToShow）{
//隐藏当前可见的应用程序（如果有！）
如果（visibleAppName！==null）{
$（'#'+visibleAppName）.hide（）；
}
//并显示通过的一个
$（'#'+appNameToShow）.show（）；
//更新visibleApp属性。
visibleAppName=appNameToShow；
}
//$（文档）。就绪将等待页面完成呈现
$（文档）.ready（函数（）{
//浏览应用程序阵列，并将单击处理程序添加到
//这是各自的链接。
apps.forEach（函数（名称）{
$（'#'+name+'-link'）。在（'click'，onLinkClicked）上；
});
});         
这里有东西
这里有东西
这里有东西


如果您希望了解更多有关JavaScript开发的信息，那么我建议您阅读本书，其中提供了对该语言及其一些怪癖的精彩介绍。
我建议您使用JQuery。它具有跨浏览器支持，并且可以简化类似的工作；）
在标签中包括以下内容
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

JSFiddle示例：欢迎来到SO！Gre
<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>

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

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

.apps{
    position:relative;
}

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

.selected {
    visibility: visible;   
}