个人中心
gpt4 book ai didi

javascript - 在选择带图片的 radio 上打开 div

转载 作者：太空宇宙 更新时间：2023-11-04 11:58:49 24 4
gpt4 key购买 nike

slider 中的前 3 个选项工作正常，但其他选项不工作。以下是HTML代码:

<!DOCTYPE html> 
<head>
<title>IT Equipments Trade-In</title>
<link href="http://new.spruceit.net/tradein/jquery.bxslider.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://new.spruceit.net/tradein/style.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://new.spruceit.net/tradein/jquery.min.js"></script>
<script type="text/javascript" src="http://new.spruceit.net/tradein/radio.js"></script>
<script type="text/javascript" src="http://new.spruceit.net/tradein/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.slider1').bxSlider({
    slideWidth: 250,
    minSlides: 2,
    maxSlides: 3,
    slideMargin: 10
  });
});
</script>


</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#faqs">FAQs</a></li>
        <li><a href="#terms">Terms</a></li>
        <li><a href="#Contact">Contact Us</a></li>
    </ul>
</div>
    <center>
    <form>
    <h1>Select Product Build Type</h1>
        <div class="cc-selector">
            <div class="slider1">                       
                        <div class="slide"><input id="WN" type="radio" name="trade-in" value="WN" />
                    <label class="drinkcard-cc WN" for="WN"></label></div>
                    <div class="slide"><input id="WD" type="radio" name="trade-in" value="WD" />
                    <label class="drinkcard-cc WD" for="WD"></label></div>
                    <div class="slide"><input id="AN" type="radio" name="trade-in" value="AN" />
                    <label class="drinkcard-cc AN" for="AN"></label></div>
                    <div class="slide"><input id="AD" type="radio" name="trade-in" value="AD" />
                    <label class="drinkcard-cc AD" for="AD"></label></div>
                    <div class="slide"><input id="WT" type="radio" name="trade-in" value="WT" />
                    <label class="drinkcard-cc WT" for="WT"></label></div>
                    <div class="slide"><input id="AT" type="radio" name="trade-in" value="AT" />
                    <label class="drinkcard-cc AT" for="AT"></label></div>
                </div>
            </div>
        </div>
        <div id="xbox" class="WN box">Build type You have selected is <strong>Under Construction</strong></div>
        <div id="xbox" class="WD box">Build type You have selected is <strong>Under Construction</strong></div>
        <div id="xbox" class="AN box">Build type You have selected is <strong>Under Construction</strong></div>
        <div id="xbox" class="AD box">Build type You have selected is <strong>Under Construction</strong></div>
        <div id="xbox" class="WT box">Build type You have selected is <strong>Under Construction</strong></div>
        <div id="xbox" class="AT box">Build type You have selected is <strong>Under Construction</strong></div>
    </center></form>
    <div id="footer">
        <p>Copyright &copy; 2015 Trade-in Program<p>
    </div>
</body>



</html>

如果我更改脚本的位置，所有选项都会开始起作用，但会垂直显示，这是不需要的。

此外，如果我可以在其中添加一个功能，例如在进行选择时页面会自动向下滚动到表单...

最佳答案

试试这个:

    <!DOCTYPE html>
<html>
<head>
    <title>IT Equipments Trade-In</title>
    <link href="http://new.spruceit.net/tradein/jquery.bxslider.css" rel="stylesheet"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="http://new.spruceit.net/tradein/style.css">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://new.spruceit.net/tradein/jquery.min.js"></script>
    <!--    <script type="text/javascript" src="http://new.spruceit.net/tradein/radio.js"></script>-->
    <script type="text/javascript" src="http://new.spruceit.net/tradein/jquery.bxslider.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $('.slider1').bxSlider({
                slideWidth: 250,
                minSlides: 2,
                maxSlides: 3,
                slideMargin: 10
            });
$("label").on("click", function()
        {
            $("label").attr("style", "");
            $(this).css({
                '-webkit-filter': 'none',
                '-moz-filter'   : 'none',
                'filter'        : 'none'
            });
        });
            $('input[type="radio"]').click(function()
            {
                alert(this.value)
                if($(this).attr("value") == "WN")
                {
                    $(".box").hide();
                    $(".WN").show();
                }
                if($(this).attr("value") == "WD")
                {
                    $(".box").hide();
                    $(".WD").show();
                }
                if($(this).attr("value") == "AN")
                {
                    $(".box").hide();
                    $(".AN").show();
                }
                if($(this).attr("value") == "AD")
                {
                    $(".box").hide();
                    $(".AD").show();
                }
                if($(this).attr("value") == "WT")
                {
                    $(".box").hide();
                    $(".WT").show();
                }
                if($(this).attr("value") == "AT")
                {
                    $(".box").hide();
                    $(".AT").show();
                }
            });
        });
    </script>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#faqs">FAQs</a></li>
        <li><a href="#terms">Terms</a></li>
        <li><a href="#Contact">Contact Us</a></li>
    </ul>
</div>
<center>
    <form>
        <h1>Select Product Build Type</h1>
        <div class="cc-selector">
            <div class="slider1">
                <div class="slide"><input id="WN" type="radio" name="trade-in" value="WN"/>
                    <label class="drinkcard-cc WN" for="WN"></label></div>
                <div class="slide"><input id="WD" type="radio" name="trade-in" value="WD"/>
                    <label class="drinkcard-cc WD" for="WD"></label></div>
                <div class="slide"><input id="AN" type="radio" name="trade-in" value="AN"/>
                    <label class="drinkcard-cc AN" for="AN"></label></div>
                <div class="slide"><input id="AD" type="radio" name="trade-in" value="AD"/>
                    <label class="drinkcard-cc AD" for="AD"></label></div>
                <div class="slide"><input id="WT" type="radio" name="trade-in" value="WT"/>
                    <label class="drinkcard-cc WT" for="WT"></label></div>
                <div class="slide"><input id="AT" type="radio" name="trade-in" value="AT"/>
                    <label class="drinkcard-cc AT" for="AT"></label></div>
            </div>
        </div>
        <div id="xbox" class="WN box">Build type You have selected is <strong>WN Under Construction</strong></div>
        <div id="xbox" class="WD box">Build type You have selected is <strong>WD Under Construction</strong></div>
        <div id="xbox" class="AN box">Build type You have selected is <strong>AN Under Construction</strong></div>
        <div id="xbox" class="AD box">Build type You have selected is <strong>AD Under Construction</strong></div>
        <div id="xbox" class="WT box">Build type You have selected is <strong>WT Under Construction</strong></div>
        <div id="xbox" class="AT box">Build type You have selected is <strong>AT Under Construction</strong></div>
    </form>
</center>
<div id="footer">
    <p>Copyright &copy; 2015 Trade-in Program
    <p>
</div>
</body>
</html>

关于javascript - 在选择带图片的 radio 上打开 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30005144/

24 4 0
文章推荐： java - 将样式表添加到 javafx 时遇到问题
文章推荐： linux - 我的 Bacula 传输率非常低。我如何配置导演来改善这一点？
文章推荐： c++ - 编译器找不到 ui_xyz.h 文件
文章推荐： linux - 将 RTF 粘贴为格式化的 Markdown；将 markdown 导出为格式化的 HTML
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com