Question

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

当点击link1时，会出现app1，然后点击link2后，app2会出现在link1的顶部。当link2关闭时，link1仍然可见。我需要检查所有4并使所有隐藏，除了当前选择。

Answer 1

轻微更新;该功能现在是独立的。

This should work how you want;它会拉出正确的范围，如果再次点击它会再次隐藏它。

这是代码：

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

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

Answer 3

我的坏，编辑了答案，它会对你有所帮助。我不认为，有任何需要使用变量。只需隐藏所有跨度，然后将您传递的那个显示为变量。

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

Answer 4

您应该跟踪变量中的当前可见项目（最初为null）。

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

然后使刚刚点击的跨度可见，并记住它现在是当前可见的项目（除非刚刚点击的那个是直到现在才可见的那个 - 在这种情况下你不应该使任何东西可见，不再有当前可见的项目。）

Answer 5

欢迎来到Stack Overflow！

首先，我建议您使用jQuery帮助您使用JavaScript。 jQuery（以及其他类似的框架，如Zepto，MooTools和Dojo）可以解决JavaScript中的一些问题，例如cross browser inconsistencies和make things a lot easier。要在项目中包含jQuery，您只需在页面的<head>标记中添加以下内容：

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

现在您可以访问jQuery，您可以删除添加到onclick代码中的所有<a>属性。不鼓励使用onclick标签，因为它可以追溯到Web开发的早期阶段，之后（几乎）同意DOM级别1标准。相反，建议您绑定到“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开发的更多信息，那么我建议您阅读Object Orientation JavaScript，其中提供了对该语言及其一些怪癖的精彩介绍。

如何在点击时显示跨度，但在单击其他链接时消失？

5 个答案: