Checkbox

Вопрос-ответ JavaScript
1

Друзья, подскажите пожалуйста одну вещь…
пишу что-то типо табов на инпутах выходит так

<input id="tab_2" type="radio" name="tab" />
<label for="tab_2" id="tab_l2">Audio</label>

, с разметкой все понятно, подскажите как записать в url хеш тег и возможно ли это вообще на инпутах?!

Спасибо

2

С помощью JS же)

Просто скопируй в body

<form id="form"><!-- создаем форум -->
        <!-- создаем инпуты -->
        <input id="tab_1" type="radio" name="tab" />
        <br>
        <input id="tab_2" type="radio" name="tab" />
        <br>
        <input id="tab_3" type="radio" name="tab" />
    </form>

    <script type="text/javascript">
    var form = document.getElementById('form');
    <!-- находим нашу форму, можно использовать любой элемент-обертку -->

    form.addEventListener('click', function(ev) {
        <!-- декларируем обработчику событий клик -->

        <!-- выводим в консоль часть id инпута на который кликнули -->
        console.log(ev.target.id.split('_')[1]);
        
        <!-- если у нас в id есть `tab_` то изменяем наш хеш -->
        if (ev.target.id.indexOf('tab_') !== -1) {
            document.location.href = '#tab_' + ev.target.id.split('_')[1];
        }
    }, false);
</script>

Вроде все подробно расписал, если что спрашивай
Еще советую гуглить твой вопрос, на многие вопросы ответы давно найдены ;)
http://stackoverflow.com/questions/4282069/add-a-fragment-to-the-url-without-causing-a-redirect

1 лайк
3

Спасибо за отклик!
а подскажи пожалуйста, а что если необходимо добавить в в урл шех не по последующиму id ,а именно по названию вкладки, т.е “General”, “Additional”, “Confirmation”

<input id="General" type="radio" name="tab" value="" checked="checked"/>
<label for="General" id="General_l1">General</label>
        
<input id="Additional" type="radio" name="tab" value=""/>
<label for="Additional" id="Additional_l2">Additional</label>
       
<input id="Confirmation" type="radio" name="tab" value=""/>
<label for="Confirmation" id="Confirmation_l3">Confirmation</label>

теоретически понимаю, что можно сделать так…

<script>
 document.getElementById('General').onclick = function() {
            window.location.hash = 'General';
        }
        document.getElementById('Additional').onclick = function() {
            window.location.hash = 'Additional';
        }
        document.getElementById('Confirmation').onclick = function() {
            window.location.hash = 'Confirmation';
        }
</script>

но код уж очень уродливый кокой-то…

4 
console.log(ev.target.value);