0

jQuery タブ ウィジェットのレンダリングに問題があります。このFiddle には、2 つの画像が表示されます。Professional Advisers の画像をクリックすると、タブ ウィジェットが表示されます。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 に答える