显示/隐藏div的选择/活动类

时间:2016-08-05 02:01:07

标签: javascript jquery html css toggle

所以我有这个东西,我需要在任何时候显示一个div,具体取决于点击的按钮。我发现this很小的小提琴几乎是完美的,除了,因为当选择一个链接时它没有显示。我想拥有它,以便所选的链接可以具有某种活动类或看起来与其他链接不同。那可能吗?我一直在查看问题,但我无法找到答案。

如果有人感兴趣,我正在使用它for this(但代码真的搞砸了,抱歉)。 (我还想更改顶行上的过滤器按钮来重置和过滤所有图像,但我知道这是一个不同的问题。仍然可以提供任何帮助!)

HTML

import org.virtualbox_5_0.*;

public class VirtualboxVMStop {

    public static void main(String[] args) {

        String machineName = "Centos_1";
        String url = "http://localhost:18083";
        String user = "test";
        String passwd = "test";

        VirtualBoxManager mgr = VirtualBoxManager.createInstance(null);
        mgr.connect(url, user, passwd);

        // Get the virtual machine you need to connect to.
        IVirtualBox vbox = mgr.getVBox();
        IMachine machine = vbox.findMachine(machineName);

        ISession session = null;
        IProgress prog;

        // Determine the status of the virtual machine.
        MachineState state = machine.getState();
        System.out.println(state);

        if (MachineState.Running == state) {
            session = mgr.getSessionObject();
            machine.lockMachine(session, LockType.Shared);
            prog = session.getConsole().powerDown();
            prog.waitForCompletion(10000);
            session.unlockMachine();
        } else {
            System.out.println(machineName+" is PoweredOff!");
        }
    }
}

jquery的

<div id="linkwrapper">
    <a id="link1" href="#">link1</a><br/>
    <a id="link2" href="#">link2</a><br/>
    <a id="link3" href="#">link3</a>
</div>

<div id="infocontent">
    <div id="link1content">Information about 1.</div>
    <div id="link2content">Information about 2.</div>
    <div id="link3content">Information about 3.</div>
</div>

1 个答案:

答案 0 :(得分:1)

你可以简化这样的小提琴:

$('a[id^=link]').click(function(){
    $('a[id^=link]').removeClass('meactive');
    $(this).addClass('meactive');

    $('#infocontent>div').slideUp();

    var tmp = this.id;
    $('#'+tmp+'content').slideDown();
}); //end a.click

jsFiddle Demo

注意:

(1)$('a[id^=link]') - 使用 a

开头的ID来抓取所有link个元素

(2)$('#' +tmp+ 'content') - 构建选择器,如:$('#link3content)`