Question

我在渲染jQuery标签小部件方面遇到了困难。在this小提琴中，您将看到两张图片。如果单击Professional Advisers图像，则会显示选项卡小部件。如果单击Industry小部件，则会呈现jQuery模式对话框。

问题是标签窗口小部件的显示方式 - 它应该在图像下方的区域中整齐地打开，模态对话框也是如此。我不确定它是否是一个CSS问题（我已尝试以各种方式设置#tabs元素而没有成功）或者我是否需要随意播放（我已经尝试过了）将#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
}

Answer 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">

jQuery标签小部件显示问题

1 个答案: