如何在location.href中点击添加变量

Question

让我解释一下我需要什么

首先，我想填充两个输入。如果这两个值相等，则当我单击go按钮时，它将转到另一个页面。在该页面中将有一个选项卡，如果条件为真，它将打开第一个选项卡，否则将打开第二个选项卡。

<div class="span-10 center-block text-center">
    <p>
        I am looking to <strong>borrow £</strong> 
        <input 
            type="text" 
            value="1500" 
            maxlength="4" 
            class="borrow-text-box borrow-amount number" 
            id="borrow-amount"
        > 
        over a period of 
        <input 
            type="text" 
            value="36" 
            maxlength="2" 
            class="borrow-text-box borrow-month number" 
            id="borrow-month"
        > 
        <strong>months</strong>
    </p>
    <button 
        class="button button-primary tab-select" 
        id="tab-select" 
        data-url="choice-loan.shtml"
    >GET A QUICK QUOTE</button>
</div>

<script>
    $('#tab-select').on(
        'click', 
        function() {
            var borrowamount = $('#borrow-amount').val(),
            borrowmonth = $('#borrow-month').val(),
            locationtab = $(this).attr('data-url');

            //getquote = $(this).attr('data-tab');
            if (
                borrowamount >= 200 && 
                borrowamount <= 800 && 
                borrowmonth >= 5 && 
                borrowmonth <= 9
            ) {
                location.href = locationtab;
            } else {

            }
        }
    );
</script>

选项卡代码如下

$('.tab-header li:first-child').addClass('active');
$('.tab-section .tab-content-blk:first').show();
$('.tab-header ul li').click(
    function( event ) {
        if ($(this).hasClass('active')) return false;

        var name = $(this).attr('data-tab');
        var $visible = $('.tab-section .tab-content-blk:visible');
        $('.tab-header ul li').removeClass('active');
        $(this).addClass('active');

        if ( $visible.length == 0 ) {
            showContent(name);

        } else { 
            $visible.fadeOut(
                500, 
                function() {    
                    showContent( name );
                }
            );
        }
    }
);

function showContent(name){
    $( "#" + name ).fadeIn( 500 );
}

Answer 1

在页面中你有一个表单，你可以这样做：

$('#tab-select').on(
    'click', 
    function() {
        var destination_page = 'http://www.my-site.ext/destination-page';
        var borrowamount = $('#borrow-amount').val(),
        borrowmonth = $('#borrow-month').val(),
        locationtab = $(this).attr('data-url');

        //getquote = $(this).attr('data-tab');
        if (
            borrowamount >= 200 && 
            borrowamount <= 800 && 
            borrowmonth >= 5 && 
            borrowmonth <= 9
        ) {
            location.href = destination_page + '#tab-1';
        } else {
            location.href = destination_page + '#tab-2';
        }
    }
);

这将生成一个类似于http://www.my-site.ext/destination-page#tab-1或http://www.my-site.ext/destination-page#tab-2的url，具体取决于您在脚本中执行的条件检查。

然后在目标页面中，你可以像这样访问你的"#“变量：

var active_tab = 'tab-1'; // Give a default value
if ( window.location.hash ) { // If there is a hash in the URL
    active_tab = window.location.hash; // Get the hash value
}

然后根据active_tab变量编写显示/隐藏目标选项卡的代码。