Два якоря и два стола, нужно показать и спрятать

Question

Два якоря и два стола, нужно показать и спрятать

0

У меня есть два якоря и две таблицы, после нажатия на ящик 1, я хочу, чтобы таблица1 появилась, и при нажатии на строку anchor2 1 должна быть закрыта, а таблица 2 должна появиться.

Мой код в JavaScript для переключения между show и hide:

function setTable(what) {
    if (document.getElementById(what).style.display == "block") {
        document.getElementById(what).style.display = "none";
    }
    else if (document.getElementById(what).style.display == "none") {
        document.getElementById(what).style.display = "block";
    }
}

Мои два якоря:

<td>
    <a href="#" onclick="setTable('aboutdialog');return false" id="iam">I am</a>
</td>
<td>
    <a href="#" onclick="setTable('stab');return false" id="photo">Photo</a>
</td>

Мои две таблицы:

<table id="aboutdialog" title="Me mE me!!" style="display:none;" >
<table width="100%" id="stab" style="display:none;width:58%;height: 60%;">

Теперь это работает для меня, как, при первом нажатии на anchor1 он показывает таблицу 1 и вторую таблицу скрывает таблицу1. То же самое для anchor2.

Но я хочу, чтобы щелкнуть anchor1, чтобы закрыть таблицу 2, если она открыта, и отобразить только таблицу1 наоборот для anchor2.

Beginner PHP 20 фев. 2014, в 08:24

Источник

0

Здесь довольно много людей, которые помогали. Могу ли я предложить вам ответить и / или опротестовать ответы, которые, по вашему мнению, сработали бы?
halfer 24 фев. 2014, в 17:22

Теги:

javascript

jquery

6 ответов

2

Без jQuery

    <td>
        <a href="#" onclick="setTable('aboutdialog', 'stab');return false" id="iam">I am</a>
    </td>
    <td>
        <a href="#" onclick="setTable('stab', 'aboutdialog');return false" id="photo">Photo</a>
    </td>

тогда

function setTable(what, second) {
    if (document.getElementById(what).style.display == "block") {
        document.getElementById(what).style.display = "none";
    } else if (document.getElementById(what).style.display == "none") {
        document.getElementById(what).style.display = "block";
        document.getElementById(second).style.display = "none";
    }
}

Демо: скрипка

Решение jQuery может выглядеть так:

<table>
    <tr>
        <td>
            <!--Add a class trigger to the anchor elements-->
            <a href="#aboutdialog" id="iam" class="trigger">I am</a>
        </td>
        <td>
            <!--Add a class trigger to the anchor elements-->
            <a href="#stab" id="photo" class="trigger">Photo</a>
        </td>
    </tr>
</table>
<!--Add a class target to the tables elements-->
<table id="aboutdialog" title="Me mE me!!" style="display:none;" class="target">
    <tr>
        <td>1</td>
    </tr>
</table>
<!--Add a class target to the tables elements-->
<table width="100%" id="stab" style="display:none;width:58%;height: 60%;" class="target">
    <tr>
        <td>2</td>
    </tr>
</table>

тогда

//dom ready handler
jQuery(function () {
    var $targets = $('.target');
    $('.trigger').click(function () {
        var id = $(this).attr('href');
        //hide all other target elements
        $targets.not(id).hide();
        //toggle the display of current element
        $(id).toggle()
    })
})

Демо: скрипка

Arun P Johny 20 фев. 2014, в 05:52

1

Попробуйте использовать jquery

$(document).ready(function($) {
    $('#iam').click(function(){
        $('#aboutdialog').show();
        $('#stab').hide();
    });

    $('#photo').click(function(){
        $('#stab').show();
        $('#aboutdialog').hide();
    });
});

Sherin Jose 20 фев. 2014, в 05:56

1

Вы можете сделать что-то вроде этого:

$('#iam').click(function() {
    $(this).closest('#aboutdialog').show().siblings('#stab').hide();
});

$('#photo').click(function() {
    $(this).closest('#stab').show().siblings('#aboutdialog').hide();
});

Felix 20 фев. 2014, в 05:54

1

живой пример здесь >>

Простая с библиотекой jquery:

$('#iam').click(function(){
    $('#aboutdialog').show().siblings('table').hide();
});
$('#photo').click(function(){
    $('#newdialog').show().siblings('table').hide();
});

HTML

<a href="#" onclick="setTable('aboutdialog');return false" id="iam">I am</a></td>
<td><a href="#" onclick="setTable('stab');return false" id="photo">Photo</a></td>

<table id="aboutdialog" title="Me mE me!!" style="display:none;" >
<tr><th>abc</th></tr>
</table>

<table id="newdialog" title="Me mE me!!" style="display:none;" >
<tr><th>yaskjd</th></tr>
</table>

suraj rawat 20 фев. 2014, в 05:48

1

$(document).ready(function() {
    var options = {'iam': 'aboutdialog', 'photo': 'stab'};
    $('#iam, #photo').on('click', function() {
        $('#aboutdialog, #stab').hide();
        $('#' + options.($(this).attr('id'))).show();
    });
});

Chen-Tsu Lin 20 фев. 2014, в 05:16

Ещё вопросы

Здесь довольно много людей, которые помогали. Могу ли я предложить вам ответить и / или опротестовать ответы, которые, по вашему мнению, сработали бы?

vaibhav silar · Accepted Answer · 2014-02-20T05-28-00.000Z

Просто замените функцию

function setTable(what){

   if(what=="aboutdialog"){
      document.getElementById("aboutdialog").style.display="block";
      document.getElementById("stab").style.display="none";
   }
   else if(what=="stab"){
      document.getElementById("aboutdialog").style.display="none";
      document.getElementById("stab").style.display="block";
   }
}

Спасибо тебе большое .. Это сработало .. На самом деле я застрял на 2 дня в этом .. Большое спасибо ...