Javascript 加载时显示，而不仅仅是在选中时显示_Javascript_Css

Javascript 加载时显示，而不仅仅是在选中时显示

javascript css

Javascript 加载时显示，而不仅仅是在选中时显示,javascript,css,Javascript,Css,我有演示设置在我想如果在页面加载时选中了Yes，那么它会显示选中内容的结果。只有当我返回并检查yes（是）时，即使它已经被检查过了，这才有效 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

我有演示设置在

我想如果在页面加载时选中了Yes，那么它会显示选中内容的结果。只有当我返回并检查yes（是）时，即使它已经被检查过了，这才有效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){

    if ($('.trigger').is(':checked'))  {
            $('.content').hide();
            $('.' + $(this).data('rel')).show();                            
            }

    $('.trigger').click(function() {
            $('.content').hide();
            $('.' + $(this).data('rel')).show();     
    });
});

</script>

<style>

.gads {
    border:none;
    background-color:transparent;
    outline:none;
}

.content {
    display: none;
}

.none {
    border:none;
    background-color:transparent;
    outline:none;
}

.ee {
    border:none;
    background-color:transparent;
    outline:none;
}

.et {
    border:none;
    background-color:transparent;
    outline:none;
}

.gads-yes { 
    border:none;
    background-color:transparent;
    outline:none;
}

.gads-no { 
    border:none;
    background-color:transparent;
    outline:none;
}

.gads-na { 
    border:none;
    background-color:transparent;
    outline:none;
}

.ee-yes { 
    border:none;
    background-color:transparent;
    outline:none;
}

.ee-no { 
    border:none;
    background-color:transparent;
    outline:none;
}

</style>

</head>

<BODY>


<div id="content">
<form id="form1" name="form1" method="post" action="add_incident.asp">

<table border="0" class="formset" >

     <tr>
        <td>&nbsp;</td>
    </tr>

    <tr>
        <td><label class="style8">Event?</label></td>
        <td>     
        <input type="radio" name="age1" value="Yes" class="gads-yes trigger" data-rel="gads-yes" /><span class="style8"> Yes</span>
        <input type="radio" name="age1" value="No" class="gads-no trigger" data-rel="gads-no" /><span class="style8"> No</span>
        <input type="radio" name="age1" value="NA" class="gads-na trigger" data-rel="gads-na" /><span class="style8"> NA</span>
        </td>
    </tr>

</table>

<div>
    <div class="gads-yes content"> 

<table border="0" class="formset">

    <tr>
        <td class="style9">MENU</td>
    </tr>


    <tr>
        <td><label for="description" class="style8">Description</label></td>
        <td colspan="2" class="textarea"><textarea class="textbox2" id="description" name="description" rows="3"></textarea></td>
    </tr>

    <tr>
        <td colspan="3" align="right"><input type="submit" name="submit3" value="Submit" class="form_button_clear" /></td>
    </tr>
</table>

</div>
<div class="gads-no content">

<table border="0" class="formset" >

    <tr>
        <td colspan="4" class="style9">MENU 2</td>
    </tr>

    <tr>
        <td><label for="description1" class="style8">Description Two</label></td>
        <td colspan="3"><textarea id="description1" name="description1" rows="3" class="textbox2"></textarea></td>
    </tr>


    <tr>
        <td colspan="4" align="right"><input type="submit" name="submit2" value="Submit" class="form_button_clear" /></td>
    </tr>
</table>
</div>
</div>

</form>

</body>
</html>


$（文档）.ready（函数（）{
如果（$（'.trigger'）。是（':checked'））{
$（'.content'）.hide（）；
$（'.+$（this.data（'rel'））.show（）；
}
$（'.trigger'）。单击（函数（）{
$（'.content'）.hide（）；
$（'.+$（this.data（'rel'））.show（）；
});
});
盖兹先生{
边界：无；
背景色：透明；
大纲：无；
}
.内容{
显示：无；
}
.没有{
边界：无；
背景色：透明；
大纲：无；
}
.ee{
边界：无；
背景色：透明；
大纲：无；
}
.et{
边界：无；
背景色：透明；
大纲：无；
}
gads先生是的{
边界：无；
背景色：透明；
大纲：无；
}
gads先生{
边界：无；
背景色：透明；
大纲：无；
}
gads na{
边界：无；
背景色：透明；
大纲：无；
}
.ee是{
边界：无；
背景色：透明；
大纲：无；
}
.ee no{
边界：无；
背景色：透明；
大纲：无；
}
事件
对
不
NA
菜单
描述
菜单2
说明二

为以下内容更改JS：

<script>
    $(document).ready(function(){
        $('.trigger').on('click', function() {
            $('.content').hide();
            $('.' + $(this).data('rel')).show();     
        }).filter(':checked').trigger('click');
    });
</script>


$（文档）.ready（函数（）{
$（'.trigger'）。在（'click'，function（）上{
$（'.content'）.hide（）；
$（'.+$（this.data（'rel'））.show（）；
}).filter（“：选中”）.trigger（'click'）；
});

首先绑定click事件，然后在页面加载时在过滤的

：checked

元素上触发它。

更改JS以获得以下内容：

<script>
    $(document).ready(function(){
        $('.trigger').on('click', function() {
            $('.content').hide();
            $('.' + $(this).data('rel')).show();     
        }).filter(':checked').trigger('click');
    });
</script>


$（文档）.ready（函数（）{
$（'.trigger'）。在（'click'，function（）上{
$（'.content'）.hide（）；
$（'.+$（this.data（'rel'））.show（）；
}).filter（“：选中”）.trigger（'click'）；
});

首先绑定click事件，然后在页面加载时在过滤的

：checked

元素上触发它。

如果使用：eq（0），则在中更改选择器

}))

或者您可以使用gads是选择器

 $('.' + $('.gads-yes').data('rel')).show();

如果使用：eq（0），则更改中的选择器

}))

或者您可以使用gads是选择器

 $('.' + $('.gads-yes').data('rel')).show();

您可以使用hide（）的回调：

尝试

$（'input.gads yes'）。触发（'click'）在您的代码之后尝试$（'input.gads yes'）。触发器（'click'）
在您的codeOdd足够多之后，我的输入没有显示为选中状态，尽管：我想我需要先解决这个问题。我今天得走了，但我很感激你们的输入。奇怪的是，我的输入没有被检查出来，尽管：我想我需要先解决这个问题。我今天得走了，但我很感谢你们的意见。