具有多种形式和锚点的多个切换按钮

Question

我有很多表格，可以在这些表格之间进行切换。但是我想我倒退了一步。

理想情况下，我只想在页面加载时看到“生成客户计算” <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/

Answer 1

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