个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试使用图像作为按钮来显示 div 容器上的内容，就像 youtube 上顶部和左侧的按钮一样。
我想连续做几个按钮，让它们在另一个div上显示某个内容。因为每个按钮的所有内容都显示在同一个 div 中，所以我希望打开的内容在单击另一个按钮时消失。我知道 JQuery 的 tabs() 函数，但我还没有找到任何带有分离按钮的解决方案。
编辑:对我有用的代码，但没有单独的按钮(我想要的)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs( );
});
</script>
<style type="text/css">
#tabs {width:100%;height:100%;}
ul {clear:both; background:black;}
li .active {float:left;}
li {display:none;}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tab-1">Nunc tincidunt</a></li>
<li><a href="#tab-2">Proin dolor</a></li>
<li><a href="#tab-3">Aenean lacinia</a></li>
</ul>
<div id="tab-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tab-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tab-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>
最佳答案
这是FIDDLE吗？像你想要的东西？
JS
$('.text').hide();
$('img').click(function(){
if ( $(this).attr('id') == 'phooey' )
{
$('.holder1').children('.text').toggle('slide');
}
if ( $(this).attr('id') == 'dawg' )
{
$('.holder2').children('.text').toggle('slide');
}
if ( $(this).attr('id') == 'woody' )
{
$('.holder3').children('.text').toggle('slide');
}
编辑:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
关于jquery - 使用单独的按钮打开/关闭 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22055204/
25
4
0
我开始学习 Oracle JavaSE 认证考试。 我创建了一个 IntelliJ Idea 项目来处理我的训练源代码。我想尽量减少 IntelliJ Idea 的帮助。 我只想使用:颜色语法、终端选
默认情况下，.DPR 和 .DPROJ 的文件扩展名描述是相同的，因此在资源管理器中打开具有相同基本名称的项目文件时，两个文件描述都会列为“Delphi 项目文件”，这提供了一个选择开发人员 - 要打
我目前正在从 android 网站了解 Navigation Drawer，我正在使用他们的示例 http://developer.android.com/training/implementing-
我需要帮助。 我在 A3:A500 列中有单词和数字 我需要改变他们的名字。 如果单元格包含单词“previ”，则如果单元格是数字，则将字母“p”放入新列中。如果它是一个词，那么不要放“p” ...就
我正在尝试编写一些 VBA，它允许按钮添加一个空行，保持相同的格式，就在 SUM 公式所在的行上方。 到目前为止，我实现了创建一个空行，但我不知道如何实现代码以让该新行继承相同的格式样式(包括边框和格
我在共享网络驱动器上有两个工作簿: 工作簿 A(表) 工作簿 B(数据透视表 - 连接到源工作簿 A) 我正在尝试，当打开 Workbook B 时，运行宏并执行以下操作: 取消保护工作簿 B 上的某
我正在开发一个需要在在线/离线模式下进行测试的应用程序，所以我想知道是否有任何方法可以打开/关闭 iPad 模拟器的互联网连接(不关闭我的 MAC 的互联网服务)。请帮忙 最佳答案 不，模拟器使用与您
我需要对目录的所有文件执行我的脚本(搜索)。以下是有效的方法。我只是问哪个最好。 (我需要格式的文件名:parsedchpt31_4.txt) 全局: my $parse_corpus; #(for
在我的代码中，我想有条件地执行一些操作: #ifdef DEBUG NSLog(@"I'm in debug mode"); #endif 我已配置“项目”->“编辑项目设置”->“构建”选项卡，以便
我编写了一个小程序来比较笔记本电脑的性能。为了使程序CPU更加密集，我用一些多线程代码(通过Parallel API实现)实现了Rabin-Karp模式匹配算法。 我注意到，当在关闭编译器优化标志的情
使用以下代码来关闭模态并打开第二个模态。总是遇到同样的问题可以关闭一个但不能打开第二个，或者如果我更改顺序我可以打开一个但不能关闭另一个。 (我想我已经尝试过101版本了)。如果有人能帮忙的话。
blue sky 默认情况下，当指针悬停时显示标题。 是否可以切换它，例如: $('#button').on('click', function(){ if (something) {turn
我正在编写一个简单的宏，它将打开、保存和关闭一个 Excel 文件(例如 myworkbook.xlsx)，但我无法执行此操作。我的文件 myworkbook.xlsx 位于以下位置: C:\User
我正在加载两个 geoJson 层 - 出于测试目的，两个层都是相同的数据，但是是从两个不同的 json 文件中提取的。当我在图层 Controller 中打开和关闭图层时，图层的绘制顺序会发生变化。
我在我的设置 Activity 中发现，当用户单击 ToggleButton 时，它应该在整个应用程序中静音，但它不起作用。我在教程类中放入的 SoundPool onClick 按钮声音仍在 onC
我有一部双卡手机。如果我想打开飞行模式，两个 SIM 卡都会发生这种情况。 是否可以通过编程方式仅对一张SIM卡进行操作(用户可以选择两者之一)？我看到了here上的帖子，他们一直工作到 API 16
我目前正在开发一个带有一些 pipe() 和重定向的 C shell 程序。 我使用 dup2() stdout 和 stderr (1 & 2) 重定向。 当我用 int fd = open("te
Jquery: 有没有办法捕获浏览器打开“打开/另存为”对话框时触发的事件？ Open/Save dialog example http://qpack.orcanos.com/helpcenter/
我知道你可以用 window.close 关闭 window.open 但还有其他方法吗？我有一个打开 facebook 连接的弹出窗口，我想在用户连接到 facebook 时关闭弹出窗口，然后刷新父
我搜索一个事件，如果不存在，则搜索一种方法来了解屏幕是否关闭(电源选项 - 控制面板 - 关闭显示设置)。 这些解决方案都不适合我。 所以要么我在某个地方错了，要么就是不合适。 How to get
我是一名优秀的程序员,十分优秀！