我有很多表格,可以在这些表格之间进行切换。但是我想我倒退了一步。
理想情况下,我只想在页面加载时看到“生成客户计算” <a>
标签。当我单击它时,我想在第一个窗口下方看到“计算器”链接,然后当我单击该链接时,即要查看所有表单标题。
我不确定是否需要按照<ul>
元素的排序方式或内容来重新排列HTML。我碰壁了。
$(".calc-nav li a").on("click", function() {
toggleForms($(this).data("id"));
});
$(".calc-nav li:first a").click();
$(".calcs1").hide();
function toggleForms(id) {
$(".forms form").hide();
$(".forms #" + id).show();
}
/* form {
margin-left: 10px;
}
ul {
padding-left: 0;
}
.calc {
background-color: rgb(246, 246, 246);
color: black;
padding: 10px 0px 10px 10px;
border-bottom: 1px solid #dedede;
text-align: left;
font-size: 15px;
line-height: 24px;
cursor: pointer;
list-style-type: none;
margin-bottom: -.1px;
}
.link {
display: block;
color: black;
}
.focus {
color: #005aaa;
}
.title {
background-color: rgb(0, 90, 170);
color: rgb(255, 255, 255);
font-size: 22px;
font-weight: 600;
line-height: 26px;
padding: 10px 0px 10px 10px;
margin-bottom: 0px;
}
.calculatorList {
color: rgb(255, 255, 255);
font-size: 22px;
font-weight: 600;
line-height: 26px;
padding: 10px 0px 10px 10px;
list-style-type: none;
cursor: pointer;
}
p {
padding-top: 10px;
margin-bottom: 0px;
} */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-4">
<ul class="calculatorList">
<li>
<a class="link">Generating Customer Caclulations</a>
</li>
</ul>
<ul>
<li>
<a class="link" data-id="cacls1">Calculators</a>
</li>
</ul>
<ul class="calc-nav">
<li class="calc">
<a class="link" data-id="form1">Lifetime Value Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form2">Breakeven Analysis</a>
</li>
<li class="calc">
<a class="link" data-id="form3">Total Audience Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form4">Number of Offers Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form5">Margin Calculator</a>
</li>
</ul>
</div>
<div class="col-md-8 forms">
<form id="form1">
<h3>Lifetime Value Calculator</h3>
<p>Calculator which determines the lifetime value of a customer</p>
<p>The average dollar amount of a client's reorder: </p>
<input value="" type="text" class='num1' placeholder="$50.00" />
<p> How many times per year does an average client buy from you? </p>
<input value="" type="text" class='num2' placeholder="12" />
<p> On average, how many years does a client continue doing business with you? </p>
<input value="" type="text" class='num3' placeholder="6" />
<p>Customer Lifetime Value: </p>
<input value="" type="text" class='total' placeholder="$3000.00" readonly/>
</form>
<form id="form2">
<h3>Breakeven Analysis Calculator</h3>
<p> Calculator which determines your breakeven analysis</p>
<p> Customer Lifetime Value: </p>
<input value="" type="text" class='num1' placeholder="$3000.00" />
<p> Gross Margin Percentage: </p>
<input value="" type="text" class='num2' placeholder="60.00%" />
<p> Marin Per Customer: </p>
<input value="" type="text" class='total1' placeholder="$1800.00" readonly/>
<p> Monthly Advertising Spend: </p>
<input value="" type="text" class='num3' placeholder="$2000.00" />
<p> Number of Customers to breakeven:
<p>
<input value="" type="text" class='total2' placeholder="1.11" readonly/>
</form>
<form id="form3">
<h3>Total Audience Calculator</h3>
<p>Calculator which determines your total audience</p>
<p> Number of residence mailed: </p>
<input value="" type="text" class='num1' placeholder="50,000" />
<p> Average Number of people per residence: </p>
<input value="" type="text" class='num2' placeholder="4.25" />
<p> Total potential audience </p>
<input value="" type="text" class='total' placeholder="212,500" readonly/>
</form>
<form id="form4">
<h3>Number of Offers</h3>
<p>Calculator which determines your total number of offers</p>
<p>Number of residence mailed: </p>
<input value="" type="text" class='num1' placeholder="50,000" />
<p> Number of Coupons: </p>
<input value="" type="text" class='num2' placeholder="6" />
<p> Total number of coupons </p>
<input value="" type="text" class='total' placeholder="300,000" readonly/>
</form>
<form id="form5">
<h3>Margin Calculator</h3>
<p>Calculator which determines your margins</p>
<p>Revenue: </p>
<input value="" type="text" class='num1' placeholder="$3000.00" />
<p> Cost of Goods Sold: </p>
<input value="" type="text" class='num2' placeholder="$2250.00" />
<p> Margin: </p>
<input value="" type="text" class='total1' readonly placeholder="750.00" readonly/>
<p> Margin Percentage: </p>
<input value="" type="text" class='total2' readonly placeholder="25%.00" readonly/>
</form>
</div>
</div>
为了节省空间,我把它放在了一个小提琴中:https://jsfiddle.net/so4y0nb2/15/
答案 0 :(得分:0)
I've updated the jsFiddle based on your comment.
这一次,我对自己的财产有了更多的自由,并试图以一种可能的方式将其放在一起。它远非完美,有很多不足之处,但应该有所帮助。
HTML:
<div class="row">
<div class="col-md-4">
<!-- I removed the <ul> and instead created a standalone <a>, I wasn't sure what purpose have everything in a <ul> served -->
<a href="#" class="link title" id="gen-cust-calc">Generating Customer Caclulations</a>
<!-- Same container for calculators but I changed the <p> Calculators into an <a> -->
<div id="calc-nav-container">
<a href="#" class="link calc" id="calc-button">Calculators</a>
<ul id="calc-nav" class="calculatorList">
<li class="calc">
<a class="link" data-id="form1">Lifetime Value Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form2">Breakeven Analysis</a>
</li>
<li class="calc">
<a class="link" data-id="form3">Total Audience Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form4">Number of Offers Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form5">Margin Calculator</a>
</li>
</ul>
</div>
</div>
<!-- the forms start here... -->
</div>
CSS:
#calc-nav-container,
#forms,
#forms form,
#calc-nav {
display: none;
}
#calc-nav-container.open,
#forms.open,
#forms form.open,
#calc-nav.open {
display: block;
}
jQuery:
$(document).ready(function(){
// Instead of hiding elements on document ready, I set the them to display none in CSS
// Prevent default behavior of anchors with #
$("a[href='#']").on('click', function(e){
e.preventDefault();
})
})
// When 'Generating Customer Calculations' is clicked
$('#gen-cust-calc').on('click', function(){
// Show both the calculator container and the first button
$('#calc-nav-container, #calc-button').toggleClass('open');
});
// When 'Calculators' is clicked
$('#calc-button').on('click', function(){
$('#calc-nav, #forms').toggleClass('open');
});
// Handle click for calculators
$("#calc-nav li a").on("click", function() {
toggleForms($(this).data("id"));
});
// I like to use classes instead of the .show() or .hide() methods because I don't like the inline styles they add
function toggleForms(id) {
// Remove any open class
$('#forms form').removeClass('open');
// Toggle open on the clicked form
$('#' + id).toggleClass('open');
}