多个<a> tags changing HTML code depending on which one is selected

时间:2016-09-21 05:47:22

标签: javascript php jquery html ajax

I have the following code..

<!-- LANGUAGE -->
<div class="languages_box">
    <span class="red">Languages:</span>
    <a href="#" class="selected"><img src="../images/au.gif" alt="" title="" border="0" height="12px" width="15px"/></a>
    <a href="#"><img src="../images/gb.gif" alt="" title="" border="0" height="12px" width="15px" /></a>
    <a href="#"><img src="../images/de.gif" alt="" title="" border="0" height="12px" width="15px" /></a>
</div>

<!-- CURRENCY -->
<div class="currency">
    <span class="red">Currency: </span>
    <a href="#" class="selected">AUD</a>
    <a href="#">GBP</a>
    <a href="#">EUR</a>
</div>

Which produces the following result..

My expected output

I'm trying to alter the code so that when a user clicks on another flag or value, it updates the webpage to change with one is selected. To do this, I would imagine every <a> tag would include a <?php if(something) {echo (class=\"selected\"); } ?> but I'm unsure what the something would be.

Is there a way to do this in PHP? Or is it only possible in Ajax / jQuery since the page content has already been loaded?

3 个答案:

答案 0 :(得分:4)

<?php
session_start();

echo $_SESSION['flag'];
?>
<!-- LANGUAGE -->
<div class="languages_box">
    <span class="red">Languages:</span>
    <a href="#" class="selected" id="1"><img src="../images/au.gif" alt="" title="" border="0" height="12px" width="15px"/></a>
    <a href="#" id="2"><img src="../images/gb.gif" alt="" title="" border="0" height="12px" width="15px" /></a>
    <a href="#" id="3"><img src="../images/de.gif" alt="" title="" border="0" height="12px" width="15px" /></a>
</div>

<!-- CURRENCY -->
<div class="currency">
    <span class="red">Currency: </span>
    <a href="#" <?php if ($_SESSION['flag'] == 1) { ?> class="selected" <?php } ?>>AUD</a>
    <a href="#" <?php if ($_SESSION['flag'] == 2) { ?> class="selected" <?php } ?> id="gbp">GBP</a>
    <a href="#" <?php if ($_SESSION['flag'] == 3) { ?> class="selected"  <?php } ?>>EUR</a>
</div>
<style>
    .selected{
        color:green;
        font-size:20px;
    }
</style>
<script src="js/jquery.min.js" type="text/javascript"></script>

<script>
    $(document).ready(function () {
        $('.languages_box a').click(function ()
        {
            var flagid = ($(this).attr('id'));
            var jsonData = {"flagid": flagid};
            $.ajax({
                type: 'POST',
                async: false,
                url: "testadmintest.php",
                data: jsonData,
                success: function (data) {
                    //alert(data);
                    window.location.reload();
//                    $('.currency a').removeClass('selected');
//                        if($.trim(data)==1){
//                       $('#gbp').addClass('selected');
//                    }

                }
            });
        })
    });
</script>

&lt; ---- php code -----&gt;

<?php

session_start();
unset($_SESSION['flag']);
if (isset($_POST['flagid'])) {
    $flagid = $_POST['flagid'];
    if ($flagid == 1) {
        $_SESSION['flag'] = 1;
    } else if ($flagid == 2) {
        $_SESSION['flag'] = 2;
    } else {
        $_SESSION['flag'] = 3;
    }
}

//echo"1";
?>

答案 1 :(得分:2)

您可以使用get发送标志变量,然后:

if(isset($_GET['flag']) && $_GET['flag'] == your flag)   
{echo (class=\"selected\"); }

为每个链接使用一个标志,并将链接的onclick功能更改为form.submit()

答案 2 :(得分:2)

因为您现在对所更改的内容不感兴趣。所以,我假设它会被单独处理。

您已经拥有了css类来显示所选的货币或语言。

所以,你的html看起来会像下面的内容(我只是为了货币编写,语言会使用类似的方法):

<!-- CURRENCY -->
<div class="currency">
    <span class="red">Currency: </span>
    <a href="#" <?php echo ($_GET['currency']=="AUD" || empty($_GET['currency']))?'class="selected"':'';
      ?>>AUD</a>
    <a href="#" <?php echo ($_GET['currency']=="GBP")?'class="selected"':'';
      ?>>GBP</a>
    <a href="#" <?php echo ($_GET['currency']=="EUR")?'class="selected"':'';
      ?>>EUR</a>
</div>

我假设您有一个可以通过PHP访问的货币的GET参数。除此之外,您还可以从会话变量(例如$ _SESSION [&#39;语言&#39;])访问当前选定的语言,这种情况大多数情况下都是如此。这一切都取决于服务器端实现(PHP)。