내용으로 Div를 채우기

정의 된 크기의 div가 있고 그 내용이 모두 표시되지 않도록 설정된 작은 페이지를 만들고 있습니다.내용으로 Div를 채우기

위의 div는 클릭 할 때 div의 내용을 변경하는 "링크"역할을하는 p 태그 목록입니다. 그러나, 나는 단지 이것을 작동시키는 것처럼 보이지 않습니다.

HTML

<p id="link1">Content 1</p> 
<p id="link2">Content 2</p> 
<p id="link3">Content 3</p> 

<div class="subcontent"> 
<div class="hide cont1"> 
<p>Title</p> 
<p>Content 1</p> 
</div> 
<div class="hide cont2"> 
<p>Title</p> 
<p>Content 2</p> 
</div> 
<div class="hide cont3"> 
<p>Title</p> 
<p>Content 3</p> 
</div> 
</div>

CSS

.subcontent{ 
    box-sizing: border-box; 
    border: solid 1px #DDD; 
    height:300px; 
    width: 70%; 
    padding: 0px 15px; 
    margin-left: 22%; 
    margin-bottom: 10px; 
    font-size: 90%; 
} 
.hide{ 
    display: none;

# 링크 1을 클릭하면 내용 1 표시 갈 수있는 가장 좋은 방법이 무엇인지에 대한 어떤 생각을?

또한 한 번의 클릭으로 내용이 표시되면 어떻게 새 내용이 표시되기 전에 다시 숨길 수 있습니까?

내가 제시 한 아이디어 중 하나라도 분명하지 않다면 미안합니다. 저는이 모든 것에 대해 여전히 매우 새롭습니다.

출처

2014-12-02 Christian Bowers

당신이 그것을 작동하게하는 것을 시도 했 클래스 명 제거? –

몇 가지 다른 Javascript와 JQuery 개념을 시도해 보았습니다. 그들 중 대부분은 내가 원하는 것처럼 디스플레이 속성을 변경하기보다는 이미있는 내용을 대체하기 위해 조정되었으므로별로 멀지 않았습니다. 링크 ID와 일치하는 콘텐츠 클래스를 검색하고 해당 콘텐츠의 표시 속성을 변경하기 위해 링크 및 콘텐츠에서 ID 및 클래스를 변경해야하는 한 가지 방법을 시도했지만 성공하지 못했습니다. –

질문을 할 때 이미 시도한 것을 나눌 수 있다면 좋을 것입니다 ... –

JavaScript (및/또는 JQuery)에서 onclick 이벤트 용 EventHandler를 사용할 수 있습니다. 각 p 태그에 대해 onclick에 대한 이벤트 핸들러를 ID를 통해 연결합니다. 그런 다음이 이벤트 핸들러에서 트리거 된 함수를 사용하여 연관된 div의 표시를 변경합니다.

이벤트 처리기에 대해 조금 읽으십시오. onclick, mouseover 및 다른 많은 트리거에 대한 것들이 있습니다. 사물의

출처

2014-12-02 02:37:47

커플 :

1) 당신은 p 요소의 클릭 핸들러를 작성해야합니다.

2) 다음

3) 원하는 DIV 여기

$("p[id^=link]").click(function(){ 
    var currentdivshowid=this.id.replace(/[^\d.]/g, ''); 
    $('.hide').not(".cont"+currentdivshowid).hide(); 
    $(".cont"+currentdivshowid).toggle(); 
});

Working Demo

출처

2014-12-02 02:38:46

글쎄, 데모를 보면,이 특히 이것을 사용하는 페이지 중 일부는 꽤 많은 링크가 있기 때문에 매우 간결한 방법입니다. 나는 그것을 시도했지만 어떤 결과도 얻지 못하고있다. 당황 스럽지만 외부 자바 스크립트 파일에 잘못 연결했을 수도 있습니다. –

을 타겟팅 선택기를 만들 추출한 번호를 사용하여 클릭 요소 ID로부터 참조 할 것 일부 JQuery와된다 추출 속임수. 거기에 더 우아한 해결책은 가능성이 있지만,이 작업 JSFiddle Here

$("#link1").click(function(){ 
    $(".cont1").removeClass("hide"); 
    $(".cont2").addClass("hide"); 
    $(".cont3").addClass("hide"); 
}); 
$("#link2").click(function(){ 
    $(".cont2").removeClass("hide"); 
    $(".cont1").addClass("hide"); 
    $(".cont3").addClass("hide"); 
}); 
$("#link3").click(function(){ 
    $(".cont3").removeClass("hide"); 
    $(".cont2").addClass("hide"); 
    $(".cont1").addClass("hide"); 
});

출처

2014-12-02 02:39:28 Zach

그냥 재미로 할 것입니다, 나는 바닐라 자바 스크립트로 모든 일을했다. 약간의 html 핸들러를 변경했습니다. :)

<style> 
#subcontent{ 
    box-sizing: border-box; 
    border: solid 1px #DDD; 
    height:300px; 
    width: 70%; 
    padding: 0px 15px; 
    margin-left: 22%; 
    margin-bottom: 10px; 
    font-size: 90%; 
} 
.hide{ 
    display: none; 
} 
</style> 
</head> 
<body> 

<a href="#" id="link1">Content 1</a> 
<a href="#" id="link2">Contect 2</a> 
<a href="#" id="link3">Contect 3</a> 

<div id="subcontent"> 
    <div id="cont1" class="hide"> 
     <p>Title</p> 
     <p>Content 1</p> 
    </div> 
    <div id="cont2" class="hide"> 
     <p>Title</p> 
     <p>Content 2</p> 
    </div> 
    <div id="cont3" class="hide"> 
     <p>Title</p> 
     <p>Content 3</p> 
    </div> 
</div> 
<script> 

//grab document handles 
var link1 = document.getElementById('link1'); 
var link2 = document.getElementById('link2'); 
var link3 = document.getElementById('link3'); 

link1.addEventListener('click', function(){ 
    showContent('cont1'); 
}); 

link2.addEventListener('click', function(){ 
    showContent('cont2'); 
}); 

link3.addEventListener('click', function(){ 
    showContent('cont3'); 
});  

function showContent(idName) { 
    var children = document.getElementById('subcontent').childNodes; 

    for(var i = 0; i < children.length; i++) { 
     if(children[i].nodeName == "DIV") { 
      children[i].style.display = "none"; 
     }; 
    }; 
    document.getElementById(idName).style.display = "block"; 
}; 
</script>

출처

2014-12-02 03:23:38 magreenberg

이것은 매우 잘 작동합니다. 감사합니다. 나는 다른 제안들도 모두 효과가 있다고 확신하지만, 이것은 내 경험 수준에 가장 적합하다고 생각합니다. 고마워, 자석. –

upvote 그것이 도움이된다면 – magreenberg

이벤트 위임을 위해 HTML을 약간 변경했습니다. 앞으로 DIV와 링크를 추가하려는 경우 유지 관리에 도움이 될 것입니다.

<div id="links"> 
    <p id="link1">Content 1</p> 
    <p id="link2">Content 2</p> 
    <p id="link3">Content 3</p> 
</div>

다음은 스크립트를의

document.getElementById('links').addEventListener('click', function(e) { 
    var index = e.target.id.slice(4); 
    var showing = document.querySelector('.subcontent > div:not(.hide)'); 
    if(showing) { 
     showing.classList.add('hide'); 
    } 
    document.querySelector('.subcontent > div.cont' + index).classList.remove('hide'); 
}, false);

설명 :

, 당신은 클릭 링크의 인덱스를 얻을 해당 ID에서 번호를 검색
아무튼 상영의 DIV를 찾아 클래스가있는 경우 hide
div가있는 경우 ,
당신이 보여하려고하는 사업부를 찾아 클래스 명 hide를 추가하여 숨기 hide

출처

2014-12-02 03:37:16 Leo

내용으로 Div를 채우기

답변

관련 문제