Question

jsfiddle here - http://jsfiddle.net/XVTKt/

CSS

#tabs{
margin-top:-68px;

}

#tabs li {
list-style:none;
display:inline;
        }
#tabs li a {
padding:16px 27px 16px 27px;
display:inline-block;
background:#666;
color:#fff;
text-decoration:none;
}
#tabs li a:active {
background-color:#0177cd;
color:#000;
        }
#tabs li a:hover {
background-color:#0177cd;
color:#000;
        }

HTML

<div id="sidebar"><div id="sidebarcontent">click</div>


<div id="sidebarinner">
<div id="tabs">

<ul>
<li><a href="#tab-1">Sites</a></li>
<li><a href="#tab-2">Apps</a></li>

</ul>

<div class="sidebarinnercontent" id="tab-1"><a href="#" >Site Example Name</a></div>
<div class="sidebarinnercontent" id="tab-2"><a href="#" >Apps Example Name</a></div>

</div>


</div></div>

标签目前显示所有内容我不确定它是如何工作的？！而且它看起来像切换和标签是冲突的，因为当我尝试点击使用“网站”到“应用”的标签时，它识别切换而不是标签？任何建议，谢谢！

Answer 1

包括jquery-ui.js

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

并进行了一些更正

Demo

Answer 2

首先，jQuery UI资源未包含在您的JSFiddle中;这就是标签不起作用并显示所有内容的原因。

其次，两者之间似乎存在冲突的原因是标签内链接的click事件冒泡到#sidebar容器并触发其幻灯片切换。为防止这种情况发生，请使用event.stopPropagation（），如下所示：

$('#tabs a').on('click', function(e){
    e.stopPropagation();
});

以下是更新后的fiddle。

我希望这有帮助！

Jquery选项卡不起作用和Jquery切换冲突？

2 个答案: