1. 首页
  2. 问答
  3. 通过单击按钮显示不同的表格

通过单击按钮显示不同的表格

2014-03-12 33 views
0

我希望每个注册按钮都链接到不同的表格。通过单击按钮显示不同的表格

例如，注册按钮一个将链接到表1（表中已经作出），然后立即登记按钮2将链接到另一个表看起来像表1

在所有我想对所有4按钮链接到4个不同的表格。由于我在编码方面的知识非常少，因此我要面对极其困难的时间。

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

<!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：什么我要找的是here

的Html

Link to demo

类

$(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'); 
});

来源

2014-03-12 user3404573

+0

一旦你点击按钮应该发生什么呢？ – Onion

+1

另外，你为什么不使用表格来表格数据？表格不应该被使用或者布局，但是就我所知，使用表格的情况是可以接受的。 – Onion

+0

一旦你点击按钮，它应该带你到另一个表。 – user3404573

回答

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'); 
    }); 
});

这是你在找什么，因为这是森那

来源

2014-03-12 20:04:44

0

你可以给一个ID，您<div>（因为你正在使用的div在小提琴的标记）在一个锚标记是指相应<div>像

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

，敷按钮

页面会自动滚动到该元素与ID yourId

检查这个JSFiddle

来源

2014-03-12 19:30:19

相关问题

 相关问题