单击按钮显示不同的表

时间：2014-03-12 19:18:11

标签： javascript html css button

我希望每个注册按钮都链接到不同的表格。

例如，注册按钮1将链接到表1（已经制作的表），然后注册按钮2将链接到另一个看起来像表1的表。

总之，我希望所有4个按钮链接到4个不同的表格。由于我对编码知之甚少，所以我很难做到这一点。

我真的非常感谢任何帮助。感谢。

Link to demo

我正在寻找的是here

HTML：

<!DOCTYPE HTML>    
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/table_style_1.css">
<title>Pricing Table</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

</head>
<body>
<div id="container">    
    <div id="pricing-table">
        <div class="table_2col">
            <div class="caption">
                <ul>

            </div><!--/ column 3-->    
            <div class="clear"></div>   
        </div><!--/. table_3col-->

        <div class="table_4col">
            <div class="caption">
                <ul>
                    <li>&nbsp;</li>
                    <li>Monthly Bandwidth <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief. It has roots in a classical Latin</span></span></a></li>
                    <li>Web Storage <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a classical Latin</span></span></a></li>
                    <li>Email Accounts <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief.</span></span></a></li> 
                    <li>Core Features <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a classical Latin. Lorem Ipsum is not simply random text. It has roots in a classical</span></span></a></li>
                    <li>Custom Domain <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief, Lorem Ipsum is not simply random text.</span></span></a></li>
                    <li>Unlimited Support <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a classical Latin</span></span></a></li> 
                    <li>Free T-shirts <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief, Lorem Ipsum is not simply random text.</span></span></a></li> 
                    <li>Free Pizza <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief.</span></span></a></li> 
                </ul>
            </div>
            <div class="column_1">
                <ul>
                    <li>
                        <h4>Basic</h4>
                        <strong>FREE</strong>
                    </li>
                    <li>250 GB</li>
                    <li>1 GB</li> 
                    <li>5</li> 
                    <li><img src="img/yes.png" alt=""></li>
                    <li><img src="img/gray_point.png" alt=""></li> 
                    <li><img src="img/gray_point.png" alt=""></li>
                    <li><img src="img/gray_point.png" alt=""></li> 
                    <li><img src="img/gray_point.png" alt=""></li> 
                    <li><a href="#" class="pricing-button bronze">Sign Up</a></li>
                </ul>
            </div><!--/ column 1-->
            <div class="column_2">
                <ul>
                    <li>
                        <h4>Standard</h4>
                        <strong>$12 a month</strong>
                    </li>
                    <li>2 TB</li>
                    <li>3 GB</li> 
                    <li>10</li> 
                    <li><img src="img/yes.png" alt=""></li>
                    <li><img src="img/yes.png" alt=""></li>
                    <li><img src="img/gray_point.png" alt=""></li>
                    <li>2</li> 
                    <li><img src="img/gray_point.png" alt=""></li> 
                    <li><a href="#" class="pricing-button silver">Sign Up</a></li>
                    </ul>
            </div><!--/ column 2-->
            <div class="column_3">
                <ul>
                    <li>
                        <h4>Professional</h4>
                        <strong>$25 a month</strong>
                    </li>
                    <li>5 TB</li>
                    <li>10 GB</li> 
                    <li>25</li> 
                    <li><img src="img/yes.png" alt=""></li>
                    <li><img src="img/yes.png" alt=""></li>
                    <li><img src="img/yes.png" alt=""></li>
                    <li>5</li> 
                    <li><img src="img/yes.png" alt=""></li>
                    <li><a href="#" class="pricing-button gold">Sign Up</a></li>
                </ul>
            </div><!--/ column 3-->
            <div class="column_4">
                <ul>
                    <li>
                        <h4>Ultimate</h4>
                        <strong>$75 a month</strong>
                    </li>
                    <li>Unlimited</li>
                    <li>1 TB</li> 
                    <li>Unlimited</li> 
                    <li><img src="img/yes.png" alt=""></li>
                    <li><img src="img/yes.png" alt=""></li>
                    <li><img src="img/yes.png" alt=""></li>
                    <li>10</li> 
                    <li><img src="img/yes.png" alt=""></li>
                    <li><a href="#" class="pricing-button platinum">Sign Up</a></li>
                </ul>
            </div><!--/ column 4-->
            <div class="clear"></div>       
        </div><!--/. table_4col--> 
    </div><!--/# pricing-table-->
</div><!--/ container-->
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

的CSS 

/* ================ GENERAL STYLES  =============== */  

* {
    margin:0;
    padding:0;  
}

body {
    background:#e4e5e5;
    background: -moz-radial-gradient(50% 50%, circle, #e4e5e5, #d2d2d2);
    background: -webkit-radial-gradient(50% 50%, circle, #e4e5e5, #d2d2d2);
    background: -o-radial-gradient(50% 50%, circle, #e4e5e5, #d2d2d2);
    background: -ms-radial-gradient(50% 50%, circle, #e4e5e5, #d2d2d2);
    background: radial-gradient(50% 50%, circle, #e4e5e5, #d2d2d2);
} 

#container {
    margin:80px auto;
    width:960px;
}
/* ================= FONT FACE  ================== */   

@font-face {
    font-family: 'RockwellRegular';
    src: url('../fonts/rockwell-webfont.eot');
    src: url('../fonts/rockwell-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rockwell-webfont.woff') format('woff'),
         url('../fonts/rockwell-webfont.ttf') format('truetype'),
         url('../fonts/rockwell-webfont.svg#RockwellRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}   

/* =============== PRICING TABLE  =============== */

#pricing-table {
    font-family:Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
    font-size: 11px;
    font-weight: normal;
    color:#787878;
    margin-bottom:3em;
}

#pricing-table .clear {
    clear:both;
} 

/* ---- Lists ---- */

#pricing-table ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#pricing-table ul li {
    margin: 0;
    padding:1.6em 1em;
    list-style-type: none;
}

#pricing-table .caption li {
    padding-left:1.5em;
    height:1em;
    -moz-box-shadow:inset -2px 0 0 #ccc;
    -webkit-box-shadow:inset -2px 0 0 #ccc;
    box-shadow:inset -2px 0 0 #ccc;
}

#pricing-table .caption .header_row {
    height:3.5em;
    padding:2em 0;
    border-bottom:3px solid transparent;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
} 

#pricing-table .caption li.row_style_1 {
    border-top:1px solid #ededed;
    background-color:#dcdcdc;
} 

#pricing-table .caption li.row_style_2 {
    border-top:1px solid #e7e7e7;
    background-color:#d2d2d2;
}

/* =========== COLUMNS  =========== */

#pricing-table .table_2col,
#pricing-table .table_3col,
#pricing-table .table_4col {
    margin-bottom:3em;  
}

/* ---- Tabel 2 col ---- */

#pricing-table .table_2col .caption {
    float:left;
    width:33.3%;
}

#pricing-table .table_2col .column_1,
#pricing-table .table_2col .column_2 {
    text-align:center;
    float:left;
    width:33.3%;
    height:100%;
}

/* ---- Tabel 3 col ---- */

#pricing-table .table_3col .caption {
    float:left;
    width:25%;
} 

#pricing-table .table_3col .column_1,
#pricing-table .table_3col .column_2,
#pricing-table .table_3col .column_3 {
    text-align:center;
    float:left;
    width:25%;
    height:100%;
}

/* ---- Tabel 4 col ---- */

#pricing-table .table_4col .caption {
    float:left;
    width:20%;
} 

#pricing-table .table_4col .column_1,
#pricing-table .table_4col .column_2,
#pricing-table .table_4col .column_3,
#pricing-table .table_4col .column_4 {
    text-align:center;
    float:left;
    width:20%;
    height:100%;
}
#pricing-table .column_1 li:first-child {
    border-left:none;
}

#pricing-table .column_1 li:last-child,
#pricing-table .column_2 li:last-child,
#pricing-table .column_3 li:last-child,
#pricing-table .column_4 li:last-child {
    border-bottom:1px solid #d5d5d5;
}

#pricing-table .column_1 li,
#pricing-table .column_2 li,
#pricing-table .column_3 li,
#pricing-table .column_4 li {
    height:1em;
    border-right:1px solid #e7e7e7;
} 

#pricing-table .column_1 li.header_row,
#pricing-table .column_2 li.header_row,
#pricing-table .column_3 li.header_row,
#pricing-table .column_4 li.header_row {
    border-top:1px solid #282828;
    border-left:1px solid #343434;
    border-right:1px solid #1c1c1c;
    border-bottom:2px solid #121212;
    -moz-box-shadow:inset 0 1px 0 #484848;
    -webkit-box-shadow:inset 0 1px 0 #484848;
    box-shadow:inset 0 1px 0 #484848;
    height:3.5em;
    display:block;
    padding:2em 0;
    text-align:center;
    background:#282828;
}

#pricing-table li.header_row.radius_left {
    -moz-border-radius:5px 0 0 0;
    -webkit-border-radius:5px 0 0;
    border-radius:5px 0 0;
} 

#pricing-table li.header_row.radius_right {
    -moz-border-radius:0 5px 0 0;
    -webkit-border-radius:0 5px 0 0;
    border-radius:0 5px 0 0;
}  

#pricing-table .header_row strong {
    color:#efefef;
    font-size:9px;
}

#pricing-table .row_style_1 {
    background-color:#fff;
    border-top:1px solid #fff;  
}

#pricing-table .row_style_2 {   
    background-color:#f5f5f5;
    border-top:1px solid #f5f5f5;   
}

/* --- columns headings ---  */

#pricing-table .column_1 h4,
#pricing-table .column_2 h4,
#pricing-table .column_3 h4,
#pricing-table .column_4 h4 {
    font-family: 'RockwellRegular';
    font-weight:100;
    font-size:20px;
}

#pricing-table .column_1 h4 {color:#dcd1be;}
#pricing-table .column_2 h4 {color:#e4e4e4;}
#pricing-table .column_3 h4 {color:#dfc491;}
#pricing-table .column_4 h4 {color:#b6d4de;}

/* --- footer row ---  */

#pricing-table .column_1 li.footer_row,
#pricing-table .column_2 li.footer_row,
#pricing-table .column_3 li.footer_row,
#pricing-table .column_4 li.footer_row {
    border:none;
    height:4.2em;
    position:relative;
    margin:0;
    padding:2em 0;  
} 

/* -- buttons --  */

#pricing-table .pricing-button {
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
    border-radius:25px;
    text-shadow:0 1px 0 #fff;
    text-decoration:none;
    font-weight:700;
    display:inline-block;
    padding:1.3em 3.5em;    
    font-size:11px;
    color:#636363;
    position:relative;
    behavior:url(js/PIE.htc);
} 

#pricing-table .bronze {
    /* gradient */
    -moz-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #ede8dd;
    -webkit-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #ede8dd;
    box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #ede8dd;
    border-top:1px solid #f6f3ed;
    background:#ede8dd;
    background: -ms-linear-gradient(top, #ede8dd, #dcd6cc); /* IE9 */
    background: -moz-linear-gradient(top, #ede8dd, #dcd6cc); /* Firefox */ 
    background: -o-linear-gradient(top, #ede8dd, #dcd6cc); /* Opera 11  */
    background: -webkit-linear-gradient(top, #ede8dd, #dcd6cc); /* Chrome 11  */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ede8dd), color-stop(1, #dcd6cc)); /* Chrome 10, Safari */    
}

#pricing-table .silver {
    /* gradient */
    -moz-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #eeeeee;
    -webkit-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #eeeeee;
    box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #eeeeee;
    border-top:1px solid #f7f7f7;
    background:#eeeeee;
    background: -ms-linear-gradient(top, #eeeeee, #dbdbdb); /* IE9 */
    background: -moz-linear-gradient(top, #eeeeee, #dbdbdb); /* Firefox */ 
    background: -o-linear-gradient(top, #eeeeee, #dbdbdb); /* Opera 11  */
    background: -webkit-linear-gradient(top, #eeeeee, #dbdbdb); /* Chrome 11  */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(1, #dbdbdb)); /* Chrome 10, Safari */
}

#pricing-table .gold {
    /* gradient */
    -moz-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #f2daab;
    -webkit-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #f2daab;
    box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #f2daab;
    border-top:1px solid #f8eccf;
    background:#f2daab;
    background: -ms-linear-gradient(top, #f2daab, #dfc491); /* IE9 */
    background: -moz-linear-gradient(top, #f2daab, #dfc491); /* Firefox */ 
    background: -o-linear-gradient(top, #f2daab, #dfc491); /* Opera 11  */
    background: -webkit-linear-gradient(top, #f2daab, #dfc491); /* Chrome 11  */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f2daab), color-stop(1, #dfc491)); /* Chrome 10, Safari */
}

#pricing-table .platinum {
    /* gradient */
    -moz-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #d2e7ee;
    -webkit-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #d2e7ee;
    box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #d2e7ee;
    border-top:1px solid #e6f3f6;
    background:#d2e7ee;
    background: -ms-linear-gradient(top, #d2e7ee, #bed6de); /* IE9 */
    background: -moz-linear-gradient(top, #d2e7ee, #bed6de); /* Firefox */ 
    background: -o-linear-gradient(top, #d2e7ee, #bed6de); /* Opera 11  */
    background: -webkit-linear-gradient(top, #d2e7ee, #bed6de); /* Chrome 11  */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d2e7ee), color-stop(1, #bed6de)); /* Chrome 10, Safari */
}

#pricing-table .bronze:hover,
#pricing-table .silver:hover,
#pricing-table .gold:hover,
#pricing-table .platinum:hover {
    -moz-transition: all 0.2s linear 0s;
    -webkit-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
} 

#pricing-table .bronze:hover { background:#dcd6cc;} 
#pricing-table .silver:hover { background:#dbdbdb;}
#pricing-table .gold:hover   { background:#dfc491;}
#pricing-table .platinum:hover { background:#bed6de;}

/* ---- bubble tooltip ----*/

#pricing-table a.tt {
    position:relative;
    z-index:24;
    color: #4B4B4B;
    font-weight:100;
    text-decoration:none;
}

#pricing-table a.tt span { display: none; }
#pricing-table a.tt:hover { z-index:25; color: #aaaaff;}
#pricing-table a.tt:hover span.tooltip {
    display:block;
    position:absolute;
    bottom:0; left:-50px;
    width:200px;
    color: #787878;
    text-align: center;
    filter: alpha(opacity:90);
    KHTMLOpacity: 0.90;
    MozOpacity: 0.90;
    opacity: 0.90;
}

#pricing-table a.tt:hover span.triangle-obtuse {
    display:block;
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    border:2px solid #5a8f00;
    color:#333;
    background:#fff;
    /* css3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

#pricing-table a.tt:hover span.triangle-obtuse:before {
    content:"";
    position:absolute;
    bottom:-15px; /* value = - border-top-width - border-bottom-width */
    left:40px; /* controls horizontal position */
    border-width:15px 15px 0;
    border-style:solid;
    border-color:#5a8f00 transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* creates the narrower right-angled triangle */
#pricing-table a.tt:hover span.triangle-obtuse:after {
    content:"";
    position:absolute;
    bottom:-13px; /* value = - border-top-width - border-bottom-width */
    left:42px; /* value = (:before left) + (:before border-left) - (:after border-left) */
    border-width:13px 13px 0;
    border-style:solid;
    border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

使用Javascript：

$(document).ready(function() {

    var columns = $('#pricing-table > div');
        columns.each(function() {
            var target = $(this);
            target.find('li:first-child').addClass('header_row');
        });

    var pt = $('#pricing-table div > div:not(.caption)', this);
        pt.find('ul li:even:not(:last-child):not(:first-child)').addClass('row_style_2');
        pt.find('ul li:odd:not(:last-child):not(:first-child)').addClass('row_style_1');
        pt.find('ul li:last-child').addClass('footer_row');   

        var table_2col = $('#pricing-table .table_2col');   
        var table_3col = $('#pricing-table .table_3col');
        var table_4col = $('#pricing-table .table_4col');

         table_2col.find('div:nth-child(2) ul li:nth-child(1)').addClass('radius_left');
         table_2col.find('div:nth-child(3) ul li:first-child').addClass('radius_right');

         table_3col.find('div:nth-child(2) ul li:nth-child(1)').addClass('radius_left');
         table_3col.find('div:nth-child(4) ul li:first-child').addClass('radius_right'); 

         table_4col.find('div:nth-child(2) ul li:nth-child(1)').addClass('radius_left');
         table_4col.find('div:nth-child(5) ul li:first-child').addClass('radius_right'); 

      /* --- Caption addClass --- */
     $('#pricing-table .caption ul li:odd').not(':first-child').addClass('row_style_1'); 
     $('#pricing-table .caption ul li:even').not(':first-child').addClass('row_style_2');   
});

2 个答案:

答案 0 :(得分：2)

JSFIDDLE DEMO 

$(document).ready(function(){
    $('#button1').click(function(){
         $("#orginal").css('display','block');
        $("table:nth-child(2)" ).css('display','none');
   });
    $('#button2').click(function(){
        $("#orginal").css('display','none');
        $("table:nth-child(2)" ).css('display','block');
   });
});

这就是你要找的东西，因为这是sime

答案 1 :(得分：0)

你可以给你的<div>一个id（因为你在小提琴的标记中使用了div）

并将按钮包裹在锚标记中，引用相应的<div>类似

<a href="#yourId"><button type="button">Click</button></a>

页面将自动滚动到ID为yourId

的元素

检查此JSFiddle

相关问题
最新问题