내 웹 사이트에 좋은 타사 아코디언 (참조 URL : http://www.switchroyale.com/vallenato/)을 통합 했으므로 기본적으로 앵커 URL로 h1 ID을 표시 할 수 없습니다.브라우저의 주소 표시 줄에 앵커 URL로 아코디언의 제목 ID를 추가하는 방법은 무엇입니까?

아코디언의 JS 코드는 다음과 같다

을 :

<body> 
<div id="accordion-container"> 
    <h1 class="accordion-header" id="tab1">What is it?</h1>   
    <div class="accordion-content"> 
     <p>Some texts goes here</p> 
    </div>   
    <h1 class="accordion-header" id="tab2">Download</h1>   
     <div class="accordion-content"> 
     <p>Some other texts goes here</p> 
    </div> 
</div> 
</body>

를 h1 ID (여기서 "tab1"와 "tab2" 결합하는 방법이있다 :

/*! 
* Vallenato 1.0 
* A Simple JQuery Accordion 
* 
* Designed by Switchroyale 
* 
* Use Vallenato for whatever you want, enjoy! 
*/ 

jQuery(document).ready(function($) 
{ 
    //Add Inactive Class To All Accordion Headers 
    $('.accordion-header').toggleClass('inactive-header'); 

    //Set The Accordion Content Width 
    var contentwidth = $('.accordion-header').width(); 
    $('.accordion-content').css({'width' : contentwidth }); 

    //Open The First Accordion Section When Page Loads 
    $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header'); 
    $('.accordion-content').first().slideDown().toggleClass('open-content'); 

    // The Accordion Effect 
    $('.accordion-header').click(function() { 
     if($(this).is('.inactive-header')) { 
      $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content'); 
      $(this).toggleClass('active-header').toggleClass('inactive-header'); 
      $(this).next().slideToggle().toggleClass('open-content'); 
     } 

     else { 
      $(this).toggleClass('active-header').toggleClass('inactive-header'); 
      $(this).next().slideToggle().toggleClass('open-content'); 
     } 
    }); 

    return false; 
});

및 html 코드의 예는 다음과 같다 위의 html 코드에서 h1 IDs이고 클릭 기능이 js 코드이므로 아코디언의 제목 ID가 검색 주소창에 앵커 URL로 추가됩니다. 다음 예제와 같이 관련 탭을 열려면 제목을 클릭 할 때마다 웹 브라우저에서?

http://www.somesite.com/somepage.html#tab1

http://www.somesite.com/somepage.html#tab2

감사

출처

2014-01-07 Silent Pond

왜해야합니까 (www.somesite.com/somepage.html#tab1)? 설명 할 수 있니? 어떤 탭을 클릭했는지 기억하고 있습니까, 아니면 헤더를 클릭했을 때 다른 페이지로 이동하고 싶습니까? – madi

What is it?

과 같이하면 www.somesite.com/somepage.html#tab1이 표시됩니다. – Manoj

@madi 각 탭마다 고유 한 URL을 갖고 싶습니다. –

클릭 이벤트를 처리하는 자바 스크립트 코드는 다음과 같다. 그에 따라 코드를 수정해야합니다. 하지만 그렇게하기 전에 아래에 제안 된 방법을 시도해보십시오. 내가 무슨 짓을

<div id="accordion-container"> 
    <a class="accordion-header" href="#tab1"><h1 id="tab1">What is it?</h1></a>   
    <div class="accordion-content"> 
     <p>Some texts goes here</p> 
    </div>   
    <a class="accordion-header" href="#tab2"><h1 id="tab2">Download</h1></a>   
     <div class="accordion-content"> 
     <p>Some other texts goes here</p> 
    </div> 
</div>

가 accordion- "로 링크를 클래스 이름을 제공하는 것입니다 : 당신이 URL은 싶은 경우

$('.accordion-header').click(function() { 
     if($(this).is('.inactive-header')) { 
      $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content'); 
      $(this).toggleClass('active-header').toggleClass('inactive-header'); 
      $(this).next().slideToggle().toggleClass('open-content'); 
     } 

     else { 
      $(this).toggleClass('active-header').toggleClass('inactive-header'); 
      $(this).next().slideToggle().toggleClass('open-content'); 
     } 
    });

, 당신은 링크로 헤더 (내 생각)을 만들 머리글". 이 방법이 효과가 있는지 확인하십시오. 이 방법이 효과가 있다면 어쩌면 어긋남이 생기면 CSS 작업을해야 할 것입니다.

출처

2014-01-07 10:00:23 madi

클릭을 바인딩해야하는 경우 헤더가 아니라 링크에 바인딩해야합니다. – madi

제목 태그에 href 속성을 추가하면 아코디언이 기능을 잃게됩니다. 앵커 된 URL은 브라우저의 주소 표시 줄에 나타나지만 관련 탭은 열리지 않습니다. 어쨌든 고마워. –

탭을 활성화하는 링크가되도록 플러그인을 변경해야합니다. selector가 클래스 또는 요소 태그를 기반으로하는지 확인합니다. 이렇게하면 문제를 해결하는 데 도움이됩니다. 여전히 링크가 필요없는 경우 onchange 이벤트를 숨겨진 텍스트 상자에 바인딩 할 수 있습니다. 헤더를 클릭하면 텍스트 상자에 탭 값이 있고 onchange에서 다른 로직을 처리합니다. 이 URL과 관련된 다른 기능이 있으면 텍스트 상자에 고유 한 URL을 넣을 수 있습니다. – madi

브라우저의 주소 표시 줄에 앵커 URL로 아코디언의 제목 ID를 추가하는 방법은 무엇입니까?

What is it?

답변

관련 문제