проблема с простым сценарием jQuery

Я новичок в jQuery, и я хочу создать свою собственную веб-страницу. Так что моя проблема в том, если мое меню использует HREF, чтобы связать каждый элемент с его заданным содержанием, как это ..проблема с простым сценарием jQuery

<li><a href="#doc1">Doc1</a></li> 
<li><a href="#doc2">Doc2</a></li> 
<li><a href="#doc3">Doc3</a></li> 

<script> 
$(document).ready(function(() { 
    $(a).click(function() { 
     $(b).show(); 
    }); 
}); 
</script>

Что я должен поставить в «а» и «б»? Я пробовал Googling, но все примеры не отображали полный скрипт. Я имел обыкновение делать это следующим образом:

<li id="doc1menu">Doc1</li> 
<script> 
$(document).ready(function() { 
    $("#doc1menu").click(function() { 
     $("#doc1content").show(); 
    }); 
}); 
</script>

Но теперь я хочу одну функцию, которая может быть использована для всех элементов на моем меню, вместо того, чтобы делать одну функцию для каждого элемента.

источник

2016-02-02 cathy305

HTML

<li><a data-content="doc1" href="#doc1">Doc1</a></li> 
<li><a data-content="doc2" href="#doc2">Doc2</a></li> 
<li><a data-content="doc3" href="#doc3">Doc3</a></li> 

<div id="doc1" class="content"> 
    doc1 
</div> 
<div id="doc2" class="content"> 
    doc2 
</div> 
<div id="doc3" class="content"> 
    doc3 
</div>

Script

$(function() { 

    //hide all content 
    $(".content").hide(); 

    //meun function 
    $("a").click(function() { 
    var attr = $(this).attr("data-content"); 
    $(".content").hide(); 
    $("#" + attr).show(); 
    }); 

});

https://jsfiddle.net/ynpsq1wp/1/

источник

2016-02-02 03:03:08 daniel

Я попробовал ваш и его работу. Благодарю. Я просто не понимаю, почему одного только href недостаточно, чтобы указать элемент меню на его содержимое. Зачем нужно включать данные? – cathy305

** href = "# doc1" ** - это чистый html, который просто помогает вам прокручивать до положения закладки, но не включает функцию javascript или jquery, например ** show ** и ** hide **. ** data-content ** - это настраиваемый атрибут для сохранения отношения кнопки к контенту, когда щелчок кнопки затем получает идентификатор содержимого, должен отображаться ** $ (this) .attr («data-content») ; **. http://www.hyperlinkcode.com/bookmark.php – daniel

** href = "# docX" ** бесполезен в этом случае, и на самом деле вы можете удалить его здесь. – daniel

Извините, мой первоначальный ответ был неправильным из-за того, что я пытался ответить на вопрос на своем телефоне. попробуйте использовать это и все, что вы хотели бы показать/скрыть вместо «a». Я использовал метод переключения, чтобы скрыть/показать

$(document).ready(function() { 
    $('li').click(function() { 
     $('a', this).toggle(); 
    }); 
});

Престола скрипку здесь расслоение плотной: https://jsfiddle.net/rf5up5fr/12/

источник

2016-02-02 02:37:01 StealthSpoder

попробовать это решение (включить JQuery ранее)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

<li><a class="menu" href="#" idmenu="doc1">Doc1</a></li> 
<li><a class="menu" href="#" idmenu="doc2">Doc2</a></li> 
<li><a class="menu" href="#" idmenu="doc3">Doc3</a></li> 

<div class="content" id="doc1" style="display:none">doc1</div> 
<div class="content" id="doc2" style="display:none">doc2</div> 
<div class="content" id="doc3" style="display:none">doc3</div> 


<javascript type='text/javascript'> 
$(document).ready(function() { 
    $(".menu").click(function() { 
     id = $(this).attr("idmenu"); 
     $(".content").hide(); 
     $("#"+id).show(); 
    }); 
}); 
</script>

Тест: https://jsfiddle.net/Cuchu/cbtwndh6/

источник

2016-02-02 03:05:53 Cuchu

Я пробовал это, и он работает, спасибо. Действительно легко понять – cathy305

проблема с простым сценарием jQuery

ответ

Смежные вопросы