Question

我使用此功能动态加载内容，具体取决于从下拉列表中选择的项目。这是我的代码：

<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script type="text/javascript">
$(function() {
    $('.group').hide();
    $('#div1').show();
    $('#stype').change(function() {
        var val = $(this).val();
        if (val) {
            $('div:not(#div' + val + ')').slideUp();
            $('#div' + val).slideDown();
        } else {
            $('div').slideDown();
        }
    });
});
</script>
<form action="a.php" method="post">

  Select:
  <select name="stype" id="stype">
    <option value="1">op1</option>
    <option value="2">op2</option>
    <option value="3">op3</option>
    <option value="4">op4</option>
  </select>
<br><br>

<div id="div1" class="group">
This is div 1.
</div>

<div id="div2" class="group">
This is div 2.
</div>

<div id="div3" class="group">
This is div 3.
</div>

<div id="div4" class="group">
This is div 4.
</div>

<input type="submit" name="submit" value=" Submit " />
</form>
</html>

当我在普通的php文件上运行它时，这非常有效。但是当我试图将它放在我的网站上并将其显示为内容时，每当我从下拉列表中进行选择时，网站的整个页面都会向上滑动并隐藏。（标题，面包屑，页脚，侧边栏和东西）

如何解决这个问题？

Answer 1

您是否尝试过更换

$('div:not(#div' + val + ')').slideUp();

使用

$('.group').slideUp();

Answer 2

尝试改变这个：

var val = $(this).val();
    if (val) {
        $('div:not(#div' + val + ')').slideUp();
        $('#div' + val).slideDown();
    } else {
        $('div').slideDown();
    }

为此：

var val = $('#stype option:selected').val();
    if (val != null) {
        $('div:not(#div' + val + ')').slideUp();
        $('#div' + val).slideDown();
    } else {
        $('div').slideDown();
    }

Answer 3

只需改变一次即可......

$('div:not(#div' + val + ')').slideUp();

替换为

$('form div:not(#div' + val + ')').slideUp();

jquery幻灯片效果隐藏完整页面

3 个答案: