Question

jQuery UI按钮/按钮组给了我适合。我在这个网站上搜索了答案，但仍然没有一个效果很好的答案。我正在使用jQuery rev 1.11.1和jQuery UI rev 1.9.2。

我有一个三个按钮的按钮组，我的用户点击它可以选择3个颜色主题中的一个可在他们的网站上使用。点击按钮后，我会在按钮组右侧显示一个带有所选颜色主题的示例网站横幅。所以我基本上根据他们的选择交换图像。

相关HTML：

<div style="float:left; width: 275px;">
    <label for="radio">Your Club Website Color Theme</label>
    <div id="colortheme">
        <input type="radio" style="float:left;" id="colortheme1" name="colortheme" value="1" {{ct1}} ><label for="colortheme1">Theme 1</label>
        <input type="radio" style="float:left;" id="colortheme2" name="colortheme" value="2" {{ct2}} ><label for="colortheme2">Theme 2</label>
        <input type="radio" style="float:left;" id="colortheme3" name="colortheme" value="3" {{ct3}} ><label for="colortheme3">Theme 3</label>
    </div>
</div>
<div style="margin-left:300px;">
    <img id="bannerSample" src="/images/club{{BannerTheme}}.jpg" style="max-width:100%">
</div>

相关Javascript：

jQuery("#colortheme input:radio").click(function(e){
   me.$form.hide(); 
   jQuery("#bannerSample").attr('src','/images/club'+this.value+'.jpg'); 
   me.$form.show();
});

注意：{{ct1}}，{{ct2}}，＆amp; {{ct3}由Perl服务器代码修补; me。$ form只是上面代码片段上方的表单集的jQuery对象。此按钮组位于jQuery UI对话框内的选项卡面板中。问题是当我单击按钮组中的一个按钮时，我在对话框中无意中向下滚动。 我已经尝试了所有常用的解决方案，e.preventDefault（），e.stopPropagation（），return false，.on（）等，基于对此网站和其他网站的研究。找不到正确的解决方案或组合来阻止不必要的滚动。以上是我能想到的最好的事情。它仍然在第一次点击时向下滚动，但在此之后，它会在更新图像时闪烁。

任何人都可以推荐更好的方法吗？

Answer 1

对我来说，问题是由于css冲突造成的。具体来说，类'ui-helper-hidden-accessible'具有绝对位置，由于某种原因导致滚动行为。

我选择在自己的样式表中创建一个更具体的规则来取代默认的jquery-ui css：

.ui-buttonset .ui-helper-hidden-accessible{
    position:relative;
}

或者，您可以使用display：none但我不确定这是否会在其他浏览器中产生意外后果。我选择了这条路线，而不是重写jquery-ui规则，因为我不确定是否有其他ui元素的特定用例需要绝对位置，我不想记住不要覆盖css如果我更新。

我通过wordpress错误机票https://core.trac.wordpress.org/ticket/23684来解决这个问题，但应该注意的是我没有在wordpress网站上工作，所以提出的解决方案是独立的。

使用jQuery Buttonset进行不需要的滚动

相关HTML：

相关Javascript：

1 个答案: