jquery - 使用 slider 发送电子邮件失败

标签 jquery html css html-email codeigniter-3

我正在尝试发送带有 slider 的电子邮件...现在除了滑动 slider 部分外,电子邮件中的每种样式都会产生效果..

这里是我的模型功能区..

        $message='<html>
<head>
<style>
.ReadMsgBody { width: 100%; background-color: #F6F6F6; }
.ExternalClass { width: 100%; background-color: #F6F6F6; }
body { width: 100%; background-color: #f6f6f6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: Georgia,  serif }
table { border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }

@-ms-viewport{ width: device-width; }

@media only screen and (max-width: 639px){
.wrapper{ width:100%;  padding: 0 !important; }
}    

@media only screen and (max-width: 480px){ 
.centerClass{ margin:0 auto !important; }         
.imgClass{ width:100% !important; height:auto; }    
.wrapper{ width:320px; padding: 0 !important; }  
.header{ width:320px; padding: 0 !important; background-image: url(http://placehold.it/320x400) !important; }   
.container{ width:300px;  padding: 0 !important; }
.mobile{ width:300px; display:block; padding: 0 !important; text-align:center !important;}
.mobile50{ width:300px; padding: 0 !important; text-align:center; }
*[class="mobileOff"] { width: 0px !important; display: none !important; }
*[class*="mobileOn"] { display: block !important; max-height:none !important; }
}




/* Slider */

.sliderFallback:hover {opacity:0.85;filter:alpha(opacity=85);}

a#rotator img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out; 
}

a#rotator img:hover { 
-webkit-transform: rotate(360deg); 
-moz-transform: rotate(360deg); 
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg); 
}

.sliderFallback { -webkit-animation: disapear 10s infinite; -moz-animation: disapear 10s infinite; -o-animation: disapear 10s infinite; animation: disapear 10s infinite; }

@-webkit-keyframes disapear {
    0% {opacity: 0;}
    100% {opacity: 0;}
    }

@-moz-keyframes disapear {
    0% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes disapear {
    0% {opacity: 0;}
    100% {opacity: 0;}
    }
@keyframes disapear {
    0% {opacity: 0;}
    100% {opacity: 0;}
    }

#slider_theme.activeSlider{
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 100px;
    height: auto;
}

#slider_theme.activeSlider .control{
    position: relative;
    left: 0px;
    white-space:nowrap;
    animation: slider-navigate 10s infinite;
    -webkit-animation: slider-navigate 10s infinite;
    -moz-animation: slider-navigate 10s infinite;
    -o-animation: slider-navigate 10s infinite;
    animation: slider-navigate 10s infinite;
    font-size: 0px;
    width: 100%;
}

#slider_theme .control img{
    margin: 0px;
    padding: 0px;
    display: inline-block;
    vertical-align: middle;
}


#slider_theme .control img:first-child{
    width: 100%;
}

#slider_theme.activeSlider .control img{
    -moz-animation: show-width 10s infinite;
    -webkit-animation: show-width 10s infinite;
    -o-animation: show-width 10s infinite;
    animation: show-width 10s infinite;
}

@keyframes show-width {
    0%{ width: 25%; max-width: 25%; }
    100%{ width: 25%; max-width: 25%; }
}

@-moz-keyframes show-width {
    0%{ width: 25%; max-width: 25%; }
    100%{ width: 25%; max-width: 25%; }
}

@-webkit-keyframes show-width {
    0%{ width: 25%; max-width: 25%; }
    100%{ width: 25%; max-width: 25%; }
}

@-o-keyframes show-width {
    0%{ width: 25%; max-width: 25%; }
    100%{ width: 25%; max-width: 25%; }
}

@keyframes slider-navigate {
    0%{ left: 0%; display: block; width: 400%; }
    12%{ left: 0%; }
    34%{ left: -100%; }
    46%{ left: -100%; }
    68%{ left: -200%; }
    80%{ left: -200%; }
    100%{ left: 0%;  width: 400%; }
}

@-webkit-keyframes slider-navigate {
    0%{ left: 0%; display: block; width: 400%; }
    12%{ left: 0%; }
    34%{ left: -100%; }
    46%{ left: -100%; }
    68%{ left: -200%; }
    80%{ left: -200%; }
    100%{ left: 0%;  width: 400%; }
}

@-moz-keyframes slider-navigate {
    0%{ left: 0%; display: block; width: 400%; }
    12%{ left: 0%; }
    34%{ left: -100%; }
    46%{ left: -100%; }
    68%{ left: -200%; }
    80%{ left: -200%; }
    100%{ left: 0%;  width: 400%; }
}

@-o-keyframes slider-navigate {
    0%{ left: 0%; display: block; width: 400%; }
    12%{ left: 0%; }
    34%{ left: -100%; }
    46%{ left: -100%; }
    68%{ left: -200%; }
    80%{ left: -200%; }
    100%{ left: 0%;  width: 400%; }
}

body[yahoo] #slider_theme .control img{
    display: none;
}

body[yahoo] #slider_theme .control img:first-child{
    display: block !important;
}    
</style>

    <title>Slider</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!--[if gte mso 15]>
    <style type="text/css">
        table { font-size:1px; line-height:0; mso-margin-top-alt:1px;mso-line-height-rule: exactly; }
        * { mso-line-height-rule: exactly; }
    </style>
    <![endif]-->    

</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" style="background-color:#F6F6F6;  font-family:Georgia,serif; margin:0; padding:0; min-width: 100%; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;">

    <!--[if !mso]><!-- -->
    <img style="min-width:640px; display:block; margin:0; padding:0" class="mobileOff" width="640" height="1" src="https://s14.postimg.org/7139vfhzx/spacer.gif">
    <!--<![endif]-->

    <!-- Start Background -->
    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#F6F6F6">
        <tr>
            <td width="100%" valign="top" align="center">


                <!-- Start Wrapper  -->
                <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#222222">
                    <tr>
                        <td height="20" style="font-size:10px; line-height:10px;">   </td><!-- Spacer -->
                    </tr>
                    <tr>
                        <td align="center">

                            <!-- Start Container  -->
                            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                                <tr>
                                    <td width="600" class="mobile" style="font-family:Georgia; font-size:12px; line-height:20px; font-weight:bold; text-transform:uppercase; letter-spacing:2px; color:#FFFFFF;" align="center">
                                        Slider
                                    </td>
                                </tr>
                            </table>
                            <!-- Start Container  -->                   

                        </td>
                    </tr>
                    <tr>
                        <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                    </tr>                        
                </table> 
                <!-- End Wrapper  -->                


                <!-- Start Wrapper  -->
                <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
                    <tr>
                        <td height="20" style="font-size:10px; line-height:10px;">   </td><!-- Spacer -->
                    </tr>
                    <tr>
                        <td align="center">

                            <!-- Start Container  -->
                            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                                <tr>
                                    <td width="600" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">

                                        <div id="slider_theme" class="activeSlider">
                                            <div class="control">
                                            <img src="http://www.placehold.it/600x400/779ECB" class="sliderupdate1" style="width: 100%;" />
                                            <!--[if !mso]><!-->
                                            <img src="http://www.placehold.it/600x400/77DD77" class="sliderupdate2" style="max-width: 0.1px; width: 0.1px;" />
                                            <img src="http://www.placehold.it/600x400/FFB347" class="sliderupdate3" style="max-width: 0.1px; width: 0.1px;" />
                                            <img src="http://www.placehold.it/600x400/336699" class="sliderupdate4" style="max-width: 0.1px; width: 0.1px;" /> <!-- FallBack -->
                                            <!--<![endif]-->
                                            </div>

                                            <div style="clear: both;"></div>
                                        </div>
                                        <div style="clear: both;"></div>                                        

                                    </td>
                                </tr>
                            </table>
                            <!-- Start Container  -->                   

                        </td>
                    </tr>                       
                </table> 
                <!-- End Wrapper  --> 



                <!-- Start Wrapper  -->
                <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
                    <tr>
                        <td height="50" style="font-size:10px; line-height:10px;">   </td><!-- Spacer -->
                    </tr>
                    <tr>
                        <td align="center">

                            <!-- Start Container  -->
                            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                                <tr>
                                    <td width="600" class="mobile" style="font-family:Georgia; font-size:12px; line-height:18px;" align="center">

                                        <!-- Start Content -->
                                        <table width="500" cellpadding="0" cellspacing="0" border="0" class="container">
                                            <tr>
                                                <td width="500" class="mobile" style="font-family:Georgia; font-size:26px; line-height:32px;" align="center">
                                                    Slider for email.
                                                </td>               
                                            </tr>
                                            <tr>
                                                <td height="30" style="font-size:10px; line-height:10px;"></td>
                                            </tr>
                                            <tr>
                                                <td width="500" class="mobile" style="font-family:Georgia; font-size:16px; line-height:20px; color:#747474;" align="center">
                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet tincidunt ligula, at rutrum dolor. Nunc laoreet interdum neque, sit amet ornare leo imperdiet nec. Suspendisse gravida eget lectus vel sollicitudin. Nunc vulputate a ante in sagittis. 
                                                </td>               
                                            </tr>
                                        </table>
                                        <!-- End Content -->                                        

                                    </td>
                                </tr>
                            </table>
                            <!-- Start Container  -->                   

                        </td>
                    </tr>
                    <tr>
                        <td height="60" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                    </tr>                        
                </table> 
                <!-- End Wrapper  -->



                <!-- Start Wrapper  -->
                <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#222222">
                    <tr>
                        <td height="20" style="font-size:10px; line-height:10px;">   </td><!-- Spacer -->
                    </tr>
                    <tr>
                        <td align="center">

                            <!-- Start Container  -->
                            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                                <tr>
                                    <td width="600" class="mobile" style="font-family:Georgia; font-size:14px; line-height:20px; color:#FFFFFF;" align="center">
                                        &copy; 2015 Slider
                                    </td>
                                </tr>
                            </table>
                            <!-- Start Container  -->                   

                        </td>
                    </tr>
                    <tr>
                        <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                    </tr>                        
                </table> 
                <!-- End Wrapper  -->                  


            </td>
        </tr>
    </table>
    <!-- End Background -->

</body>
</html>'

                ;
        $message .= $postdata['message']."<br/><br/>";

请帮我解决这个问题....现在除了滑动之外,电子邮件中的每个样式都会产生效果..

最佳答案

我用您正在制作的动画制作了第四张幻灯片。一旦您知道要更改到哪里,就不那么难了。

您的 slider_theme 设置为 100%,我将其更改为 600px 并且 overflow 处理了隐藏位。将此设置为 35%,您的图片会变大:

@keyframes show-width {
    0%{ width: 100%; max-width: 100%; }
    100%{ width: 100%; max-width: 100%; }
}

然后关键帧将大小增加到 400%

@keyframes slider-navigate

如果大小增加是有意的,那么你可以把它放回去。

<html>
<head>
<style>
.ReadMsgBody { width: 100%; background-color: #F6F6F6; }
.ExternalClass { width: 100%; background-color: #F6F6F6; }
body { width: 100%; background-color: #f6f6f6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: Georgia,  serif }
table { border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }

@-ms-viewport{ width: device-width; }

@media only screen and (max-width: 639px){
.wrapper{ width:100%;  padding: 0 !important; }
}    

@media only screen and (max-width: 480px){ 
.centerClass{ margin:0 auto !important; }         
.imgClass{ width:100% !important; height:auto; }    
.wrapper{ width:320px; padding: 0 !important; }  
.header{ width:320px; padding: 0 !important; background-image: url(http://placehold.it/320x400) !important; }   
.container{ width:300px;  padding: 0 !important; }
.mobile{ width:300px; display:block; padding: 0 !important; text-align:center !important;}
.mobile50{ width:300px; padding: 0 !important; text-align:center; }
*[class="mobileOff"] { width: 0px !important; display: none !important; }
*[class*="mobileOn"] { display: block !important; max-height:none !important; }
}




/* Slider */

.sliderFallback:hover {opacity:0.85;filter:alpha(opacity=85);}

a#rotator img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out; 
}

a#rotator img:hover { 
-webkit-transform: rotate(360deg); 
-moz-transform: rotate(360deg); 
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg); 
}

.sliderFallback { -webkit-animation: disapear 10s infinite; -moz-animation: disapear 10s infinite; -o-animation: disapear 10s infinite; animation: disapear 10s infinite; }

@-webkit-keyframes disapear {
    0% {opacity: 0;}
    100% {opacity: 0;}
    }

@-moz-keyframes disapear {
    0% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes disapear {
    0% {opacity: 0;}
    100% {opacity: 0;}
    }
@keyframes disapear {
    0% {opacity: 0;}
    100% {opacity: 0;}
    }

#slider_theme.activeSlider{
    position: relative;
    /*width: 100%;*/
	width:600px;
    overflow: hidden;
    min-height: 100px;
    height: auto;
}

#slider_theme.activeSlider .control{
    position: relative;
    left: 0px;
    white-space:nowrap;
    animation: slider-navigate 10s infinite;
    -webkit-animation: slider-navigate 10s infinite;
    -moz-animation: slider-navigate 10s infinite;
    -o-animation: slider-navigate 10s infinite;
    animation: slider-navigate 10s infinite;
    font-size: 0px;
    width: 100%;
}

#slider_theme .control img{
    margin: 0px;
    padding: 0px;
    display: inline-block;
    vertical-align: middle;
}


#slider_theme .control img:first-child{
    width: 100%;
}

#slider_theme.activeSlider .control img{
    -moz-animation: show-width 10s infinite;
    -webkit-animation: show-width 10s infinite;
    -o-animation: show-width 10s infinite;
    animation: show-width 10s infinite;
}

@keyframes show-width {
    0%{ width: 100%; max-width: 100%; }
    100%{ width: 100%; max-width: 100%; }
}

@-moz-keyframes show-width {
    0%{ width: 100%; max-width: 100%; }
    100%{ width: 100%; max-width: 100%; }
}

@-webkit-keyframes show-width {
    0%{ width: 100%; max-width: 100%; }
    100%{ width: 100%; max-width: 100%; }
}

@-o-keyframes show-width {
    0%{ width: 100%; max-width: 100%; }
    100%{ width: 100%; max-width: 100%; }
}

@keyframes slider-navigate {
    0%{ left: 0%; display: block; width: 100%; }
    25%{ left: -100%; }
    50%{ left: -200%; }
    75%{ left: -300%; }
	100%{ left: -400%; }
}

@-webkit-keyframes slider-navigate {
    0%{ left: 0%; display: block; width: 100%; }
    25%{ left: -100%; }
    50%{ left: -200%; }
    75%{ left: -300%; }
	100%{ left: -400%; }
}

@-moz-keyframes slider-navigate {
    0%{ left: 0%; display: block; width: 100%; }
    25%{ left: -100%; }
    50%{ left: -200%; }
    75%{ left: -300%; }
	100%{ left: -400%; }
}

@-o-keyframes slider-navigate {
    0%{ left: 0%; display: block; width: 100%; }
    25%{ left: -100%; }
    50%{ left: -200%; }
    75%{ left: -300%; }
	100%{ left: -400%; }
}

body[yahoo] #slider_theme .control img{
    display: none;
}

body[yahoo] #slider_theme .control img:first-child{
    display: block !important;
}    
</style>

    <title>Slider</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!--[if gte mso 15]>
    <style type="text/css">
        table { font-size:1px; line-height:0; mso-margin-top-alt:1px;mso-line-height-rule: exactly; }
        * { mso-line-height-rule: exactly; }
    </style>
    <![endif]-->    

</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" style="background-color:#F6F6F6;  font-family:Georgia,serif; margin:0; padding:0; min-width: 100%; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;">

    <!--[if !mso]><!-- -->
    <img style="min-width:640px; display:block; margin:0; padding:0" class="mobileOff" width="640" height="1" src="https://s14.postimg.org/7139vfhzx/spacer.gif">
    <!--<![endif]-->

    <!-- Start Background -->
    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#F6F6F6">
        <tr>
            <td width="100%" valign="top" align="center">


                <!-- Start Wrapper  -->
                <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#222222">
                    <tr>
                        <td height="20" style="font-size:10px; line-height:10px;">   </td><!-- Spacer -->
                    </tr>
                    <tr>
                        <td align="center">

                            <!-- Start Container  -->
                            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                                <tr>
                                    <td width="600" class="mobile" style="font-family:Georgia; font-size:12px; line-height:20px; font-weight:bold; text-transform:uppercase; letter-spacing:2px; color:#FFFFFF;" align="center">
                                        Slider
                                    </td>
                                </tr>
                            </table>
                            <!-- Start Container  -->                   

                        </td>
                    </tr>
                    <tr>
                        <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                    </tr>                        
                </table> 
                <!-- End Wrapper  -->                


                <!-- Start Wrapper  -->
                <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
                    <tr>
                        <td height="20" style="font-size:10px; line-height:10px;">   </td><!-- Spacer -->
                    </tr>
                    <tr>
                        <td align="center">

                            <!-- Start Container  -->
                            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                                <tr>
                                    <td width="600" class="mobile" style="font-family:arial; font-size:12px; line-height:18px;">

                                        <div id="slider_theme" class="activeSlider">
                                            <div class="control">

<img src="http://www.placehold.it/600x400/779ECB" class="sliderupdate1" /><!--[if !mso]><!-->
<img src="http://www.placehold.it/600x400/77DD77" class="sliderupdate2" />
<img src="http://www.placehold.it/600x400/FFB347" class="sliderupdate3" />
<img src="http://www.placehold.it/600x400/336699" class="sliderupdate4" /> <!-- FallBack -->
<!--<![endif]-->
                                            </div>

                                            <div style="clear: both;"></div>
                                        </div>
                                        <div style="clear: both;"></div>                                        

                                    </td>
                                </tr>
                            </table>
                            <!-- Start Container  -->                   

                        </td>
                    </tr>                       
                </table> 
                <!-- End Wrapper  --> 



                <!-- Start Wrapper  -->
                <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
                    <tr>
                        <td height="50" style="font-size:10px; line-height:10px;">   </td><!-- Spacer -->
                    </tr>
                    <tr>
                        <td align="center">

                            <!-- Start Container  -->
                            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                                <tr>
                                    <td width="600" class="mobile" style="font-family:Georgia; font-size:12px; line-height:18px;" align="center">

                                        <!-- Start Content -->
                                        <table width="500" cellpadding="0" cellspacing="0" border="0" class="container">
                                            <tr>
                                                <td width="500" class="mobile" style="font-family:Georgia; font-size:26px; line-height:32px;" align="center">
                                                    Slider for email.
                                                </td>               
                                            </tr>
                                            <tr>
                                                <td height="30" style="font-size:10px; line-height:10px;"></td>
                                            </tr>
                                            <tr>
                                                <td width="500" class="mobile" style="font-family:Georgia; font-size:16px; line-height:20px; color:#747474;" align="center">
                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet tincidunt ligula, at rutrum dolor. Nunc laoreet interdum neque, sit amet ornare leo imperdiet nec. Suspendisse gravida eget lectus vel sollicitudin. Nunc vulputate a ante in sagittis. 
                                                </td>               
                                            </tr>
                                        </table>
                                        <!-- End Content -->                                        

                                    </td>
                                </tr>
                            </table>
                            <!-- Start Container  -->                   

                        </td>
                    </tr>
                    <tr>
                        <td height="60" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                    </tr>                        
                </table> 
                <!-- End Wrapper  -->



                <!-- Start Wrapper  -->
                <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#222222">
                    <tr>
                        <td height="20" style="font-size:10px; line-height:10px;">   </td><!-- Spacer -->
                    </tr>
                    <tr>
                        <td align="center">

                            <!-- Start Container  -->
                            <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                                <tr>
                                    <td width="600" class="mobile" style="font-family:Georgia; font-size:14px; line-height:20px; color:#FFFFFF;" align="center">
                                        &copy; 2015 Slider
                                    </td>
                                </tr>
                            </table>
                            <!-- Start Container  -->                   

                        </td>
                    </tr>
                    <tr>
                        <td height="20" style="font-size:10px; line-height:10px;"> </td><!-- Spacer -->
                    </tr>                        
                </table> 
                <!-- End Wrapper  -->                  


            </td>
        </tr>
    </table>
    <!-- End Background -->

</body>
</html>

如果这就是您想要的,请告诉我。

关于jquery - 使用 slider 发送电子邮件失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44817482/

相关文章:

jquery - 我想在每个 li 悬停时从左到右为 li 元素设置动画

html - 有没有办法查看网页上所有 div 标签周围的边框?

javascript - PHP 内嵌框架 |每 X 次刷新一次并翻阅页面数组

带有第一个选择器的 jQuery 比不带第一个选择器慢?

javascript - 无法从 Javascript 中的输入类型数字标签获取输入的数字

javascript - 为什么不使用each()创建多个标签?

html - 在单个页面中处理多个 NgbPagination

html - 在不更改 HTML 的情况下重新排列元素的视觉顺序

html - "Elements should not have tabindex greater than zero"- 非零 Tabindex 破坏验证和 508 合规性

javascript - 我如何使用 JQuery 在动态创建的下拉列表中删除和添加值?