0

我在渲染 jQuery 选项卡小部件时遇到了困难。在这个小提琴中，您将看到两个图像。如果您单击专业顾问图像，则会显示一个选项卡小部件。如果单击 Industry 小部件，则会呈现一个 jQuery 模式对话框。

问题在于标签小部件的显示方式 - 它应该在图像下方的区域中整齐地打开，模态对话框也是如此。我不确定这是否是 CSS 问题（我尝试以各种方式设置 #tabs 元素的样式但没有成功）或者我是否需要重新调整我的 s （我尝试将 #tabs div 放入专业顾问 div没有成功）。

HTML

<a href="#" id="professional-advisers-image">
    <div class="circle hovershadow advisers advisers-box-shadow text">Professional
        advisers</div>
</a>
<a href="#" id="industry-image">
    <div class="circle hovershadow industry industry-box-shadow">Industry</div>
</a>

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Law firms</a>
    </li>
    <li><a href="#tabs-2">Accounting and audit firms</a>
    </li>
    <li><a href="#tabs-3">Management consultants and economists</a>
    </li>
    <li>
        <button id="closeTabs">X</button>
    </li>
</ul>
<div id="tabs-1">
    <p>Law firm text goes here</p>
</div>
<div id="tabs-2">
    <p>Accounting and audit firm text goes here</p>
</div>
<div id="tabs-3">
    <p>Management consultants and economists text goes here.</p>
</div>
</div>
<div id="industry-dialog" class="dialog" title="Industry">Industry text goes here</div>

Javascript

$("#tabs").tabs().hide();
$("#professional-advisers-image").click(function () {
$("#tabs").toggle();
});

$("#closeTabs").click(function () {
$("#tabs").hide();
});

$("#industry-dialog").dialog({
autoOpen: false
});
$("#industry-image").click(function () {
$("#industry-dialog").dialog("option", "modal", true);
$("#industry-dialog").dialog("option", "height", "auto");
$("#industry-dialog").dialog("option", "width", 600);
$("#industry-dialog").dialog("open");
});

CSS

.circle {
width: 220px;
height: 220px;
border-radius: 50%;
border: 2px solid #fff;
float: left;
display: inline-block;
/* text styling for circles - see also the .text style below */
font-size: 35px;
color: #FFF;
line-height: 220px;
text-align: center;
font-family: Ubuntu, sans-serif;
}
#dialog #tabs {
font-family:'Istok Web', sans-serif;
font-size: 14px;
line-height: 1.8em;
}
.advisers {
background: #5E2750;
margin-left: 28%;
margin-right: 13%;
}
.advisers-box-shadow {
box-shadow: 0px 0px 1px 1px #5E2750
}
.industry {
background: #DD4814;
}
.industry-box-shadow {
box-shadow: 0px 0px 1px 1px #DD4814
}
.hovershadow:hover {
box-shadow: 0px 0px 4px 4px #AEA79F
}
.text {
/* used by professional advisers circle */
line-height: 40px;
padding-top: 70px;
height: 150px
}
4

1 回答 1

1

在您的圈子之后尝试清除 div：

http://jsfiddle.net/JWgRB/2/

<a href="#" id="professional-advisers-image">
    <div class="circle hovershadow advisers advisers-box-shadow text">Professional
        advisers</div>
</a>
<a href="#" id="industry-image">
    <div class="circle hovershadow industry industry-box-shadow">Industry</div>
</a>

<div style="clear: both;"></div>

<div id="tabs">
于 2013-03-28T13:31:40.823 回答