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

标签 javascript jquery html css

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/

上一篇：html - 基线偏移和字母在可选文本上垂直对齐？

下一篇：java - 将样式表添加到 javafx 时遇到问题

相关文章：

html - 嵌套 block 所有边距

javascript - 将选项设置为 <select> 使用 jquery 和从 ajax 获取的值

javascript - 如何在 AJAX 函数中从 HTML 获取值字段？

javascript - 在不重新加载页面的情况下将数据插入 MySQL (Jquery)

javascript - ajax 和 php 文件从输入上传 undefined index

javascript - 如何在 pagedown 编辑器中提供我自己的插入链接对话框？

javascript - d3 鼠标参数与 jquery

javascript - 如何在 D3 Js 上下文菜单项旁边显示图像。

php - Javascript 有问题

javascript - 如何使用左/上重新定位相对DIV？

©2024 IT工具网  联系我们