JQuery-停止手风琴链接关闭所有选项卡
JQuery - Stop accordion link from closing all tabs
我希望有人能帮助我解决使用JQuery Accordion插件时遇到的问题。我对JQuery的经验很少,所以如果有任何帮助,我们将不胜感激!
基本上,我在我的一个手风琴标签中有一个链接,可以加载一个新窗口。但是,当这种情况发生时,它会关闭父窗口中的所有手风琴链接。我认为它这样做是因为它将链接视为手风琴的一部分,而我不想要它。
这是javascript代码:
<script type="text/javascript" src="js/accordion/chili-1.7.pack.js"></script>
<script type="text/javascript" src="js/accordion/jquery.easing.js"></script>
<script type="text/javascript" src="js/accordion/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/accordion/jquery.accordion.js"></script>
<script type="text/javascript">
jQuery().ready(function(){
// simple accordion
/*jQuery('#accordion').accordion();*/
jQuery('#accordion_click').accordion({
/*animated: 'bounceslide'*/
animated: 'easeslide',
autoheight: true
});
jQuery('#accordion_hover').accordion({
/*animated: 'bounceslide'*/
event: 'mouseover',
animated: 'bounceslide',
autoheight: true
});
});
</script>
这是我的HTML代码:
<a>Accordion Tab 1</a>
<div>
<a href="#" class="basic nonaccordion" onClick="MyWindow=window.open('www.newwindow.com','New_Window','toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=yes,resizable=yes,width=400,height=200'); return false;">Load Window </a>
</div>
<a>Accordion Tab 2</a>
<div>
</div>
<a>Accordion Tab 3</a>
<div>
</div>
<a>Accordion Tab 4</a>
<div>
</div>
有没有一种简单的方法可以让我从手风琴上删除选项卡1中的链接,这样在加载新窗口时就不会关闭选项卡?
谢谢!
编辑:CSS如下:
/*tab, accordion*/
/*tab 1*/
ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #c8c8c8; border-left: 1px solid #c8c8c8; width: 100%; }
ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; border: 1px solid #c8c8c8; border-left: none; margin-bottom: -1px; overflow: hidden; position: relative; background: #f5f5f5; }
ul.tabs li a { text-decoration: none; color: #9b9b9b; display: block; font-size:12px; font-family:Georgia, "Times New Roman", Times, serif; letter-spacing:3px; text-transform:uppercase; padding: 0 20px; border: 1px solid #fff; outline: none;}
ul.tabs li a:hover, ul.tabs li.active a { background: #fff; color:#000; }
html ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; }
.tab_container { border: 1px solid #f5f5f5; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; margin:0 0 20px 0; }
.tab_content { padding: 20px; }
/*tab 2*/
ul.tabs2 { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #c8c8c8; width: 100%; }
ul.tabs2 li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; border-left: none; margin-bottom: -1px; overflow: hidden; position: relative; }
ul.tabs2 li a { text-decoration: none; color: #9b9b9b; display: block; font-size:12px; font-family:Georgia, "Times New Roman", Times, serif; letter-spacing:3px; text-transform:uppercase; padding: 0 20px; border: 1px solid #fff; outline: none;}
ul.tabs2 li a:hover, ul.tabs2 li.active a { background: #fff; color:#000; }
html ul.tabs2 li.active { background: #fff; border-top: 1px solid #c8c8c8; border-left: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8;border-bottom: 1px solid #fff; }
html ul.tabs2 li.active a:hover{ color:#000; }
.tab2_container { border: 1px solid #f5f5f5; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; margin:0 0 20px 0; }
.tab2_content { padding: 20px; }
/*accordion*/
.basic { width:100%; margin-bottom:40px; }
.basic div { background:none; }
.basic p { margin-bottom : 0px; border: none; text-decoration: none; padding: 10px;}
.basic a { cursor:pointer; display:block; padding:10px 10px; margin-top: 0; text-decoration: none; color: black; border: 1px solid #e3e3e3; font-size:12px; font-family:Georgia, "Times New Roman", Times, serif; letter-spacing:3px; text-transform:uppercase; color: #9b9b9b; background: #f5f5f5 url(../images/collapsed.png) no-repeat 99% 50%; margin-bottom:1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
.basic a:hover { background-color:#fafafa; }
.basic a.selected { color: black; background: #fafafa url(../images/expanded.png) no-repeat 99% 50%;}
您发布的CSS似乎与HTML+JS无关。
尝试使用header
选项并指定直接跟在手风琴元素> a
后面的标头:http://jsfiddle.net/AkX3z/
我包含了jQueryUI演示提供的$.accordion
的基本演示。它没有这个问题,这意味着它可能是由于你排除了一个合适的标题。
相关文章:
- JQuery-停止手风琴链接关闭所有选项卡
- 链接到手风琴中的另一个选项卡,嵌入的链接将不起作用
- 如何将Magento管理选项卡界面更改为垂直手风琴
- jQuery 手风琴选项卡不会关闭
- 调整jQuery手风琴-打开所有选项卡
- 在rails上的手风琴选项卡Ruby中显示好友数据
- 如何直接链接到 jQuery 手风琴选项卡
- 使用 jquery 在 asp.net 中制作带有选项卡的手风琴
- jQuery UI - 使用外部链接在选项卡中打开手风琴
- JQuery UI(手风琴),在初始化时打开活动选项卡
- 禁用 Bootstrap 3 折叠手风琴中的切换选项
- 手风琴选项卡不折叠
- 将引导选项卡栏转换为移动大小的手风琴菜单
- 使用外部链接和哈希打开特定的手风琴选项卡
- 将选项卡式内容响应到手风琴-单击选项卡时手风琴关闭
- 如何使手风琴选项卡在活动时具有不同的颜色
- 如何将浏览器窗口移动到灵活的手风琴选项卡的顶部
- 当手风琴/选项卡打开或关闭时对页面进行样式化
- 更新我的js手风琴选项卡,以选择性地打开和关闭内容
- Jquery UI 1.10 -获取手风琴中选项卡的索引