0

我在这里有一个泡菜的小茴香。我正在使用 struts2-jquery 的标签面板。我有多个选项卡,每个选项卡都通过 ajax 返回 html 内容。

我的问题是我返回的 html 似乎破坏了选项卡式面板中选项卡的布局。选项卡结束,返回的 html 溢出到选项卡末尾之外和下方(视觉上)。

我检查了我的选项卡正在进行的 ajax 调用,并且返回的 html 是有效的。如果有一个额外的开始元素或一个额外的结束元素,您可能会期待这种行为,但 html 看起来很完美。这是加载选项卡式面板的 jsp 页面示例。
我让这个项目使用 struts2 dojo 插件工作,但发现 struts2-jquery 插件的选项卡面板上的动画等更整洁。使用 struts-dojo tabbedpanel 像这样返回 html 效果很好。关于什么会导致这种情况的任何想法?

      <sj:tabbedpanel id="remotetabs" selectedTab="1" show="true" hide="'fade'" collapsible="true" sortable="true" cache="true">

        <s:url var="remoteUrlFourDay" action="fourdayforecast.action">
            <s:param name="name"><s:property value="name"/></s:param>
            <s:param name="zipcode"><s:property value="zipcode"/></s:param>
        </s:url>
        <sj:tab id="fourday" href="%{remoteUrlFourDay}" label="4 Day Forecast" errorText=" "/>

        <s:url var="remoteUrl24Hour" action="hourlyforecast.action">
            <s:param name="name"><s:property value="name"/></s:param>
            <s:param name="zipcode"><s:property value="zipcode"/></s:param>
        </s:url>
        <sj:tab id="two" href="%{remoteUrl24Hour}" dataType="html" label="24 Hour Forecast" errorText=" "/>

        <s:url var="remoteUrlTenDay" action="tendayforecast.action">
            <s:param name="name"><s:property value="name"/></s:param>
            <s:param name="zipcode"><s:property value="zipcode"/></s:param>
        </s:url>
        <sj:tab id="tenday" href="%{remoteUrlTenDay}" label="Ten Day Forecast"   errorText=" "/>

        <s:url var="remoteUrlTest" action="webcams.action">
            <s:param name="name"><s:property value="name"/></s:param>
            <s:param name="zipcode"><s:property value="zipcode"/></s:param>
        </s:url>
        <sj:tab id="test" href="%{remoteUrlTest}" label="Test" errorText=" "/>
    </sj:tabbedpanel>

根据 Alexandr 的要求,这里是 html。我试着把它放在一个代码块中,但它的格式很有趣,所以我只是在我的网络服务器上托管了返回的 html。 从有问题的页面完全生成 Html 只需查看页面的源代码即可查看 html。这是 html 中用于返回的 ajax 的 2 个 css 样式

.block {
width: 200px;
height: 160px;
margin: 5px 10px 10px 5px;
padding: 5px;
border: 5px solid #94BEFF;
float: left; }

#wrap {
background-color: white;
margin: 0 auto;
} 

我的项目的布局问题

4

0 回答 0