如何制作链接上拉选项卡

问题描述 投票：0回答：1

当我单击链接时，我希望它拉出一个以前完全隐藏的新选项卡。这些选项卡与页面上已经看到的选项卡类似。几乎，每当你点击桌子上的“关于我”之类的东西时。它将拉出另一个选项卡/div，它看起来像这些以前存在的选项卡，并且其中包含任何信息。

是否可以只用一些 html 和 javascript 来做到这一点？我该如何让它们从隐藏变为可见 onclick？ here is the photo showing what i mean by

我知道如何链接以将其带到不同的页面，但我以前从未编写过任何代码来在同一页面上关闭或打开。

html hyperlink onclick
1个回答
0
投票

首先，您需要在 

<head>
中包含 JQuery 和 JQuery UI：

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

然后添加以下CSS：

#draggableTab {
    width: 300px;
    height: 200px;
    background-color: #eee;
    border: 1px solid #ccc;
    cursor: move;
    overflow: hidden;
}

.tabHeader {
    padding: 10px;
    background-color: #ddd;
    border-bottom: 1px solid #ccc;
}

#tabContent {
    width: 100%;
    height: 100%;
    border: none;
}

添加以下脚本：

function getTab() {
    var tab = $('<div />').appendTo('body');
    tab.attr('id', 'draggableTab')
    
    var handle = $('<div />').appendTo(tab);
    handle.attr('class', 'tabHeader')
    
    var frame = $('<iframe />').appendTo(tab);
    frame.attr('id', 'tabContent');
    frame.attr('src', 'about.html')
    
    $('#draggableTab').draggable({
        handle: '.tabHeader'
    });
}

最后但并非最不重要的还有按钮的功能：

<button onclick="getTab()">show tab</button>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.