创建切换/开关以显示不同的信息

Posted

技术标签:

【中文标题】创建切换/开关以显示不同的信息【英文标题】：Creating a toggle/switch to show different information 【发布时间】：2021-10-02 05:39:59 【问题描述】：

我对此很陌生，但我正在尝试重新创建一个切换按钮，无论单击月度还是年度按钮，都将显示月度/年度付款，类似于：https://search4less.com/#pricing。

我有 2 套价格卡，但我不确定如何连接切换开关，以便它可以按预期工作。我在这个项目中使用 vue。

任何帮助将不胜感激。

这是我正在使用的代码

    <div class="container">
  <label for="toggle_button">
        <span v-if="isActive" class="toggle__label">Monthly</span>
        <span v-if="! isActive" class="toggle__label">Annually</span>

        <input type="checkbox" id="toggle_button" v-model="checkedValue">
        <span class="toggle__switch"></span>
    </label>

    <b-row class="monthly">
   <b-col>       
    <b-card class="price-card">
        <template #header>
        <h4 class="mb-0 content-center title-colour">Search4Less</h4>
        </template>

        <b-card-body>
        <b-card-sub-title class="mb-2 content-center">€20<small style="font-size:10px">/per user</small></b-card-sub-title>

        <hr class="my-4">

        <b-card-text class="content-center">
            Limitless access Irish business<br>
             Intelligence Information.
        </b-card-text>

        <b-card-text class="small-text"><small style="font-size:14px;">(includes)</small></b-card-text>

        </b-card-body>

        <b-list-group class="content-center" flush>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Company Reports</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Director Reports</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Business Reports</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>CRO Filings</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Watchlist</b-list-group-item>
        </b-list-group>

        <hr class="my-4">

        <div style="text-align:center;">
            <b-button variant="success">Subscribe Now</b-button>
        </div>

        
    </b-card>
    </b-col>   
    <b-col>
        <b-card class="price-card">
            <template #header>
            <h4 class="mb-0 content-center title-colour">Search4Less Plus</h4>
            </template>

            <b-card-body>
            <b-card-sub-title class="mb-2 content-center">€25<small style="font-size:10px">/per user</small></b-card-sub-title>

            <hr class="my-4">

            <b-card-text class="content-center">
                All of the Search4less features +<br> 
                any 1 of the following
            </b-card-text>

            <b-card-text class="small-text"><small style="font-size:14px;">(any one)</small></b-card-text>

            </b-card-body>

            <b-list-group flush class="content-center">
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>UK Data Access</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Export Bundle</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Due Dil Reports</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Document Search</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Enhanced Watchlist</b-list-group-item>
            </b-list-group>

            <hr class="my-4">

            <div style="text-align:center;">
                <b-button variant="success">Subscribe Now</b-button>
            </div>

            
        </b-card>
    </b-col>
    <b-col>
        <b-card class="price-card">
            <template #header>
            <h4 class="mb-0 content-center title-colour">Search4Less Pro</h4>
            </template>

            <b-card-body>
            <b-card-sub-title class="mb-2 content-center price-colour">€30<small style="font-size:10px">/per user</small></b-card-sub-title>

            <hr class="my-4">

            <b-card-text class="content-center">
                All of the Search4less and<br> 
                Search4less plus features.
            </b-card-text>

            <b-card-text class="small-text"><small style="font-size:14px;">(best value)</small></b-card-text>

            </b-card-body>

            <b-list-group class="content-center" flush>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>More Data sets</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>All Features</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Saves time</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Relevant Results</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Better Insights</b-list-group-item>
            </b-list-group>

            <hr class="my-4">

            <div style="text-align:center;">
                <b-button variant="success">Subscribe Now</b-button>
            </div>    

            
        </b-card>
        
    </b-col>    
 </b-row> 
</div>
<b-row class="annually" hidden>
   <b-col>     
    <b-card class="price-card">
        <template #header>
        <h4 class="mb-0 content-center title-colour">Search4Less</h4>
        </template>

        <b-card-body>
        <b-card-sub-title class="mb-2 content-center">€195<small style="font-size:10px">/per user p/a</small></b-card-sub-title>

        <hr class="my-4">

        <b-card-text class="content-center">
            Limitless access Irish business<br>
             Intelligence Information.
        </b-card-text>

        <b-card-text class="small-text"><small style="font-size:14px;">(includes)</small></b-card-text>

        </b-card-body>

        <b-list-group class="content-center" flush>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Company Reports</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Director Reports</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Business Reports</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>CRO Filings</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Watchlist</b-list-group-item>
        </b-list-group>

        <hr class="my-4">

        <div style="text-align:center;">
            <b-button variant="success">Start Trial Now</b-button>
            <b-button variant="success">Subscribe Now</b-button>
        </div>

        
    </b-card>
    </b-col>   
    <b-col>
        <b-card class="price-card">
            <template #header>
            <h4 class="mb-0 content-center title-colour">Search4Less Plus</h4>
            </template>

            <b-card-body>
            <b-card-sub-title class="mb-2 content-center">€245<small style="font-size:10px">/per user p/a</small></b-card-sub-title>

            <hr class="my-4">

            <b-card-text class="content-center">
                All of the Search4less features +<br> 
                any 1 of the following
            </b-card-text>

            <b-card-text class="small-text"><small style="font-size:14px;">(any one)</small></b-card-text>

            </b-card-body>

            <b-list-group flush class="content-center">
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>UK Data Access</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Export Bundle</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Due Dil Reports</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Document Search</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Enhanced Watchlist</b-list-group-item>
            </b-list-group>

            <hr class="my-4">

            <div style="text-align:center;">
                <b-button variant="success">Start Trial Now</b-button>
                <b-button variant="success">Subscribe Now</b-button>
            </div>

            
        </b-card>
    </b-col>
    <b-col>
        <b-card class="price-card">
            <template #header>
            <h4 class="mb-0 content-center title-colour">Search4Less Pro</h4>
            </template>

            <b-card-body>
            <b-card-sub-title class="mb-2 content-center price-colour">€295<small style="font-size:10px">/per user p/a</small></b-card-sub-title>

            <hr class="my-4">

            <b-card-text class="content-center">
                All of the Search4less and<br> 
                Search4less plus features.
            </b-card-text>

            <b-card-text class="small-text"><small style="font-size:14px;">(best value)</small></b-card-text>

            </b-card-body>

            <b-list-group class="content-center" flush>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>More Data sets</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>All Features</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Saves time</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Relevant Results</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Better Insights</b-list-group-item>
            </b-list-group>

            <hr class="my-4">

            <div style="text-align:center;">
                <b-button variant="success">Start Trial Now</b-button>
                <b-button variant="success">Subscribe Now</b-button>
            </div>    

            
        </b-card>
    </b-col>    
 </b-row>

</body>
</div>
</template>

<script>
export default 
    name: 'Pricing',
    
    data() 
        return 
            currentState: false
        
    ,

    computed: 
        isActive() 
            return this.currentState;
        ,

        checkedValue: 
            get() 
                return this.defaultState
            ,
            set(newValue) 
                this.currentState = newValue;

【问题讨论】：

请出示一些代码。 【参考方案1】：

你不一定需要 javascript：

body 
  font-family: Arial, Helvetica, Verdana, sans-serif;


.cards 
  display: flex;


.cards > div 
  border: 1px solid silver;
  border-radius: 5px;
  padding: 2px 5px;
  margin: 0 2px;


#toggle + label:before 
  content: 'Monthly';


#toggle:checked + label:before 
  content: 'Yearly';


#toggle:not(:checked) ~ .cards > :last-child 
  display: none;


#toggle:checked ~ .cards > :first-child 
  display: none;

<input type="checkbox" id="toggle">
<label for="toggle"></label>
<div class="cards">
  <div>
    <h3>Monthly</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
  </div>
  <div>
    <h3>Yearly</h3>
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>

【讨论】：

以上是关于创建切换/开关以显示不同的信息的主要内容，如果未能解决你的问题，请参考以下文章

将按钮标签更改为关闭声音的开关，我想显示一个开关（对象，切换）

Ionic Js六：切换开关操作

php根据html切换开关显示数据库中的数据

elementplus官网右上角的开关是怎么实现的

在 Flutter 中按下切换开关时交换小部件

如何以编程方式切换uiswitch按钮