Question

我一直在网站上工作并遇到问题。在我的常见问题解答中，我有一个下拉菜单和一个提交按钮，可以链接到常见问题解答的不同部分。这非常有效。提交按钮触发javascript函数，该函数动态链接到页面上的相应锚点。另外，我希望下拉菜单中选择的问题以橙色突出显示。我得到了突出显示，但只有一瞬间它才会闪现。我想知道如何使高光保持，而不是闪光？我不确定为什么会这样。另外，如何使用jQuery突出显示淡出效果？我知道如何通过隐藏div然后使用.fade（）来实现它，但这会导致所有文本消失。非常感谢！

这是一个小提琴：http://jsfiddle.net/UjPtv/但它不能完全发挥作用，因为当你提交它时会出现错误。我认为这是因为jsfiddle不允许提交，即使这个提交只是运行一些javascript。如果您知道解决方法，请告诉我，以便我可以更新链接！谢谢！

的javascript：

var toggled = 0;
function jump_to (location) {
if(toggled == 0){
    toggled = 1;
    window.location.href = "#" + location;
    $("#wrap"+location).toggleClass("wraps_active");
}
}

HTML：

<div id = "main">
        <h2 class = "center">FACTS YOU NEED</h2>
        <h3>The Core Facts You Want To Know</h3>
        <div class = "border">
        <p>
            Jump To: 
              <form onsubmit = "jump_to(jump_list.value)">
              <select name = "jump_list">
              <option value="1">Who can go to the camp?</option>
              <option value="2"><a href = "contact_information.html">When do we check in and out?</a></option>
            </select>
            <input type = "submit" value = "Go"/>
            </form>
        </p>
        </div>
        <div id = "wrap1" class = "wraps">
        <h4><a name = "1"></a>Who can go to the camp? </h4>
        <p>
            The camp is for kids ages 9 to 17 years old who have been diagnosed with celiac disease, a condition that requires life-long adherence to a gluten-free diet.  Given limited space, we are unable to accommodate kids on gluten-free diets for other reasons (such as autism spectrum disorders).  Campers ages 16-17 years may choose to volunteer as junior counselors.  Junior counselors assist the adult volunteers, and for first session junior counselors need to arrive a day early (on Monday) for the staff orientation and training.  If there are more junior counselor applicants than there is available space, priority is given based on age, gender-need, and prior camp experience.
        </p>
        </div>
        <div id = "wrap2" class = "wraps">
        <h4><a name = "2"></a>When do we check in and out?</h4>
        <p>
            Check-in: Please see the "Calendar" on the left hand side of the website for details about each camp.Please do not arrive early.
            </br><br/>
            Check-out:  All campers must be checked out by the stated time so camp can be prepared for the next group, see the "Calendar" for date information.
        </p>
        </div>


    </div>

的CSS：

.wraps{
border-bottom:1px dashed #C3C3C3;
}
.wraps_active{
border-bottom:1px dashed #C3C3C3;
background:#FFB280;
}

Answer 1

每次提交表单时，请清除所有活动的包装类，并仅为选定的类添加它。

$('form input[type=submit]').click(function(e) {
    e.preventDefault();

    var location = $('select[name=jump_list]').val();
    window.location.href = "#" + location;

    $('.wraps').removeClass('wraps_active');
    $("#wrap"+location).addClass("wraps_active");
});

这是Fiddle。

Answer 2

请试试这个

 $("#wrap"+location).addClass("wraps_active");

而不是toggleClass

toggleClass（）不适用于div

2 个答案: