為什么這3個鏈接不起作用？

Question

請參閱http://www.collegeinsideview.com/上顯示“閱讀更多有關/ college /的內容”的圖片下方的黃色部分。

前3個鏈接無效（哥倫比亞，普林斯頓和布朗），但其余鏈接無效。 我收到一個JS錯誤，提示Uncaught Error: Syntax error, unrecognized expression: /columbia/academics/professors/1 。 為什么是這樣？

更新從原來的JS更改為

$('#left > li > a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

我沒有問題了。

的HTML

<%= link_to "Get Paid to Answer Questions", "/the-deal", id: "the_deal", class: "btn btn-link" %>
<h1 id="heading">In-Depth Reviews of Colleges</h1>
<div class="tabbable">
    <div class="tab-content">
        <div class="tab-pane fade active in" id="columbia">
            <%= image_tag "columbia1.jpg", size: "297x187", class: 'picture' %>
            <%= image_tag "columbia2.jpg", size: "297x187", class: 'picture' %>
            <%= image_tag "columbia3.jpg", size: "297x187", class: 'picture' %>
            <%= link_to "&bull; &bull; Read more about Columbia &bull; &bull;".html_safe, "/columbia/academics/professors/1", class: 'school_link' %>
            <div class="right">
                <p class="question" class="well"><strong>How does the workload impact your social life?</strong></p>
                <%= image_tag "columbia_social_atmosphere_7.png", class: 'answers' %>
                <%= link_to '--read more--', '/columbia/social-life/social-atmosphere/7', class: 'read_more' %>
            </div>
        </div>
        <div class="tab-pane fade" id="princeton">
            <%= image_tag "princeton1.jpg", size: "297x187", class: 'picture' %>
            <%= image_tag "princeton2.jpg", size: "297x187", class: 'picture' %>
            <%= image_tag "princeton3.jpg", size: "297x187", class: 'picture' %>
            <%= link_to "&bull; &bull; Read more about Princeton &bull; &bull;".html_safe, "/princeton/academics/professors/1", class: 'school_link' %>
            <div class="right">
                <p class="question" class="well"><strong>How would you make your classes better?</strong></p>
                <%= image_tag "princeton_classes_6.png", class: 'answers' %>
                <%= link_to '--read more--', '/princeton/academics/classes/6', class: 'read_more' %>
            </div>
        </div>
        <div class="tab-pane fade" id="brown">
            <%= image_tag "brown1.jpg", size: "297x187", class: 'picture' %>
            <%= image_tag "brown2.jpg", size: "297x187", class: 'picture' %>
            <%= image_tag "brown3.jpg", size: "297x187", class: 'picture' %>
            <%= link_to "&bull; &bull; Read more about Brown &bull; &bull;".html_safe, "/brown/academics/professors/1", class: 'school_link' %>
            <div class="right">
                <p class="question" class="well"><strong>Are people intellectual? Do they have thoughtful conversations with each other?</strong></p>
                <%= image_tag "brown_social_atmosphere_5.png", class: 'answers' %>
                <%= link_to '--read more--', '/brown/social-life/social-atmosphere/5', class: 'read_more' %>
            </div>
        </div>
        <div class="tab-pane fade" id="penn">
            <div class="left_pane"> 
                <%= image_tag "university-of-pennsylvania1.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "university-of-pennsylvania2.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "university-of-pennsylvania3.jpg", size: "297x187", class: 'picture' %>
                <%= link_to "&bull; &bull; Read more about Penn &bull; &bull;".html_safe, "/university-of-pennsylvania/academics/professors/1", class: 'school_link' %>
            </div>
            <div class="right">
                <p class="question" class="well"><strong>Are your classes too hard, or too easy? Why?</strong></p>
                <%= image_tag "penn_dificulty_4.png", class: 'answers' %>
                <%= link_to '--read more--', '/university-of-pennsylvania/academics/difficulty/4', class: 'read_more' %>
            </div>
        </div>
        <div class="tab-pane fade" id="yale">
            <div class="left_pane"> 
                <%= image_tag "yale1.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "yale2.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "yale3.jpg", size: "297x187", class: 'picture' %>
                <%= link_to "&bull; &bull; Read more about Yale &bull; &bull;".html_safe, "/yale/academics/professors/1", class: 'school_link' %>
            </div>
            <div class="right">
                <p class="question" class="well"><strong>Is it easy to make friends? How did you make friends?</strong></p>
                <%= image_tag "yale_social_atmosphere_1.png", class: 'answers' %>
                <%= link_to '--read more--', '/yale/social-life/social-atmosphere/1', class: 'read_more' %>
            </div>
        </div>
        <div class="tab-pane fade" id="cornell">
            <div class="left_pane"> 
                <%= image_tag "cornell1.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "cornell2.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "cornell3.jpg", size: "297x187", class: 'picture' %>
                <%= link_to "&bull; &bull; Read more about Cornell &bull; &bull;".html_safe, "/cornell/academics/professors/1", class: 'school_link' %>
            </div>
            <div class="right">
                <p class="question" class="well"><strong>Mary Donlon Hall</strong></p>
                <%= image_tag "cornell_housing_mary_donlon_hall.png", class: 'answers' %>
                <%= link_to '--read more--', '/cornell/living-environment/housing/mary-donlon-hall', class: 'read_more' %>
            </div>
        </div>
        <div class="tab-pane fade" id="harvard">
            <div class="left_pane"> 
                <%= image_tag "harvard1.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "harvard2.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "harvard3.jpg", size: "297x187", class: 'picture' %>
                <%= link_to "&bull; &bull; Read more about Harvard &bull; &bull;".html_safe, "/harvard/academics/professors/1", class: 'school_link' %>
            </div>
            <div class="right">
                <p class="question" class="well"><strong>Are there comfortable places to study?</strong></p>
                <%= image_tag "harvard_campus_2.png", class: 'answers' %>
                <%= link_to '--read more--', '/harvard/academics/classes/5', class: 'read_more' %>
            </div>
        </div>
        <div class="tab-pane fade" id="dartmouth">
            <div class="left_pane"> 
                <%= image_tag "dartmouth1.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "dartmouth2.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "dartmouth3.jpg", size: "297x187", class: 'picture' %>
                <%= link_to "&bull; &bull; Read more about Dartmouth &bull; &bull;".html_safe, "/dartmouth/academics/professors/1", class: 'school_link' %>
            </div>
            <div class="right">
                <p class="question" class="well"><strong>Do professors make things easy to understand?</strong></p>
                <%= image_tag "dartmouth_professors_1.png", class: 'answers' %>
                <%= link_to '--read more--', '/dartmouth/academics/professors/1', class: 'read_more' %>
            </div>
        </div>
        <div class="tab-pane fade" id="pitt">
            <div class="left_pane"> 
                <%= image_tag "university-of-pittsburgh1.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "university-of-pittsburgh2.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "university-of-pittsburgh3.jpg", size: "297x187", class: 'picture' %>
                <%= link_to "&bull; &bull; Read more about Pitt &bull; &bull;".html_safe, "/university-of-pittsburgh/academics/professors/1", class: 'school_link' %>
            </div>
            <div class="right">
                <p class="question" class="well"><strong>Neuroscience: What are people in the major like? How would you stereotype them?</strong></p>
                <%= image_tag "pitt_neuroscience_8.png", class: 'answers' %>
                <%= link_to '--read more--', '/university-of-pittsburgh/academics/majors/neuroscience/8', class: 'read_more' %>
            </div>
        </div>
        <div class="tab-pane fade" id="wisconsin">
            <div class="left_pane"> 
                <%= image_tag "university-of-wisconsin1.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "university-of-wisconsin2.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "university-of-wisconsin3.jpg", size: "297x187", class: 'picture' %>
                <%= link_to "&bull; &bull; Read more about Wisconsin &bull; &bull;".html_safe, "/university-of-wisconsin/academics/professors/1", class: 'school_link' %>
            </div>
            <div class="right">
                <p class="question" class="well"><strong>How much will not partying limit your social life?</strong></p>
                <%= image_tag "wisconsin_parties_3.png", class: 'answers' %>
                <%= link_to '--read more--', '/university-of-wisconsin/social-life/parties/3', class: 'read_more' %>
            </div>
        </div>
        <div class="tab-pane fade" id="colgate">
            <div class="left_pane"> 
                <%= image_tag "colgate1.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "colgate2.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "colgate3.jpg", size: "297x187", class: 'picture' %>
                <%= link_to "&bull; &bull; Read more about Colgate &bull; &bull;".html_safe, "/colgate/academics/professors/1", class: 'school_link' %>
            </div>
            <div class="right">
                <p class="question" class="well"><strong>Who wouldn't fit in?</strong></p>
                <%= image_tag "colgate_social_atmosphere_2.png", class: 'answers' %>
                <%= link_to '--read more--', '/colgate/social-life/social-atmosphere/2', class: 'read_more' %>
            </div>
        </div>
        <div class="tab-pane fade" id="adelphi">
            <div class="left_pane"> 
                <%= image_tag "adelphi-university1.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "adelphi-university2.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "adelphi-university3.jpg", size: "297x187", class: 'picture' %>
                <%= link_to "&bull; &bull; Read more about Adelphi &bull; &bull;".html_safe, "/adelphi-university/academics/professors/1", class: 'school_link' %>
            </div>
            <div class="right">
                <p class="question" class="well"><strong>How's the on-campus food (taste, price, health, convenience, hours, variety...)?</strong></p>
                <%= image_tag "adelphi_food_1.png", class: 'answers' %>
                <%= link_to '--read more--', '/adelphi-university/living-environment/food/1', class: 'read_more' %>
            </div>
        </div>
    </div>
    <ul id="left" class="nav nav-pills nav-stacked">
        <li id="columbia" class="active"><a href="#columbia">Columbia</a></li>
        <li id="princeton"><a href="#princeton">Princeton</a></li>
        <li id="brown"><a href="#brown">Brown</a></li>
        <li id="penn"><a href="#penn">Penn</a></li>

        <li id="yale"><a href="#yale">Yale</a></li>
        <li id="cornell"><a href="#cornell">Cornell</a></li>
        <li id="harvard"><a href="#harvard">Harvard</a></li>
        <li id="dartmouth"><a href="#dartmouth">Dartmouth</a></li>

        <li id="pitt"><a href="#pitt">Pitt</a></li>
        <li id="wisconsin"><a href="#wisconsin">Wisconsin</a></li>
        <li id="colgate"><a href="#colgate">Colgate</a></li>
        <li id="adelphi"><a href="#adelphi">Adelphi</a></li>
    </ul>
</div>

<div id="notify">
    <p>Right now I only have reviews for those 12 schools. Enter your email below to be notified when there's more!</p>
    <span id="notify_span">
        <%= simple_form_for :subscribe, url: 'subscribe' do |f| %>
            <%= f.input :email, placeholder: 'user@domain.com', label: false, required: true %> <br/>
            <%= f.button :submit, "1-Click Sign Up", class: "btn btn-primary", data: { :disable_with => "Submitting..." } %>
        <% end %>
    </span>     
</div>

<ul id="bottom_links">
    <li><%= link_to "I Graduated High School. Now What?", "/i-graduated-high-school-now-what" %></li>
    <li><%= link_to "How to Choose a College", "/how-to-choose-a-college" %></li>
    <li><%= link_to "How College Inside View Got Started", "https://medium.com/what-i-learned-building/322e8668ed6f" %></li>
</ul>

JS

$('#columbia > a, #princeton > a, #brown > a, #penn > a, #harvard > a, #yale > a, #cornell > a, #dartmouth > a, #pitt > a, #wisconsin > a, #colgate > a, #adelphi > a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})

的CSS

@import "bootstrap";
@import "animations";

#home_css {
    max-height: 1200px !important;
    #the_deal {
        float: right;
        font-size: 12px;
    }
    #heading {
        font-size: 42px;
        clear: right;
        margin-bottom: 15px;
    }
    .tab-content {
        overflow: hidden;
        .tab-pane {
            .picture {
                margin: 0px;
            }
            .school_link {
                display: block;
                text-align: center;
                background-color: beige;
                margin-top: -5px;
                padding: 3px 0px;
                margin-bottom: 20px;
            }
            .right {
                float: right;
                clear: both;
                width: 490px;
                height: 590px;
                .question {
                    position: relative;
                    left: 15px;
                }
                .answers{
                }
                .read_more {
                    display: block;
                    position: relative;
                    left: 15px;
                    top: 10px;
                }
            }
        }
    }
    #left {
        float: left;
        clear: left;
        width: 380px;
        padding-left: 0px;
        position: relative;
        bottom: 590px;
        height: 590px;
    }
    #notify, #bottom_links {
        position: relative;
        bottom: 575px;
    }
    #notify {
        clear: both;
        background-color: aliceblue;
        text-align: center;
        padding: 30px 0px;
        border-top: 2px solid lightgray;
        border-bottom: 2px solid lightgray;
        p {
            font-family: 'Arvo', serif;
        }
        #notify_span {
            display: block;
            margin-top: 25px;
            form {
                height: 44px;
            }
            input[type=email] {
                width: 400px;
                height: 35px;
                font-family: monospace;
                font-size: 20px;
                position: relative;
                right: 85px;
            }
            .btn-primary {
                height: 43px;
                width: 137px;
                position: relative;
                bottom: 85px;
                left: 215px;
                font-size: 16px;
            }
        }
    }
    #bottom_links {
        list-style-type: none;
        text-align: center;
        margin-top: 10px;
        margin-bottom: -1000px;
        li {
            display: inline;
            margin-right: 60px;
            font-size: 12px;
        }
    }
}

Answer 1

在工作的div和不工作的div之間，html的結構是不同的。

        <div class="tab-pane fade active in" id="columbia">
            <%= image_tag "columbia1.jpg", size: "297x187", class: 'picture' %>
            <%= image_tag "columbia2.jpg", size: "297x187", class: 'picture' %>
            <%= image_tag "columbia3.jpg", size: "297x187", class: 'picture' %>
            <%= link_to "&bull; &bull; Read more about Columbia &bull; &bull;".html_safe, "/columbia/academics/professors/1", class: 'school_link' %>
            <div class="right">
                <p class="question" class="well"><strong>How does the workload impact your social life?</strong></p>
                <%= image_tag "columbia_social_atmosphere_7.png", class: 'answers' %>
                <%= link_to '--read more--', '/columbia/social-life/social-atmosphere/7', class: 'read_more' %>
            </div>
        </div>
        <div class="tab-pane fade" id="princeton">
            <%= image_tag "princeton1.jpg", size: "297x187", class: 'picture' %>
            <%= image_tag "princeton2.jpg", size: "297x187", class: 'picture' %>
            <%= image_tag "princeton3.jpg", size: "297x187", class: 'picture' %>
            <%= link_to "&bull; &bull; Read more about Princeton &bull; &bull;".html_safe, "/princeton/academics/professors/1", class: 'school_link' %>
            <div class="right">
                <p class="question" class="well"><strong>How would you make your classes better?</strong></p>
                <%= image_tag "princeton_classes_6.png", class: 'answers' %>
                <%= link_to '--read more--', '/princeton/academics/classes/6', class: 'read_more' %>
            </div>
        </div>
        <div class="tab-pane fade" id="brown">
            <%= image_tag "brown1.jpg", size: "297x187", class: 'picture' %>
            <%= image_tag "brown2.jpg", size: "297x187", class: 'picture' %>
            <%= image_tag "brown3.jpg", size: "297x187", class: 'picture' %>
            <%= link_to "&bull; &bull; Read more about Brown &bull; &bull;".html_safe, "/brown/academics/professors/1", class: 'school_link' %>
            <div class="right">
                <p class="question" class="well"><strong>Are people intellectual? Do they have thoughtful conversations with each other?</strong></p>
                <%= image_tag "brown_social_atmosphere_5.png", class: 'answers' %>
                <%= link_to '--read more--', '/brown/social-life/social-atmosphere/5', class: 'read_more' %>
            </div>
        </div>

以上是無效的。 下面是第一個這樣做的。

        <div class="tab-pane fade" id="penn">
            <div class="left_pane"> 
                <%= image_tag "university-of-pennsylvania1.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "university-of-pennsylvania2.jpg", size: "297x187", class: 'picture' %>
                <%= image_tag "university-of-pennsylvania3.jpg", size: "297x187", class: 'picture' %>
                <%= link_to "&bull; &bull; Read more about Penn &bull; &bull;".html_safe, "/university-of-pennsylvania/academics/professors/1", class: 'school_link' %>
            </div>
            <div class="right">
                <p class="question" class="well"><strong>Are your classes too hard, or too easy? Why?</strong></p>
                <%= image_tag "penn_dificulty_4.png", class: 'answers' %>
                <%= link_to '--read more--', '/university-of-pennsylvania/academics/difficulty/4', class: 'read_more' %>
            </div>
        </div>

兩者之間的快速比較告訴我，從事工作的大學的結構是這樣的

<div id="columbia">
  <div class="left_pane" >
    <a>relevant link</a>
  </div>
  <div class="right" >
  </div>
</div>

雖然無效的部分是這樣構造的

<div id="columbia">
  <a>relevant link</a>
  <div class="right" >
  </div>
</div>

這種結構上的差異似乎弄亂了頁面上的一些javascript選擇器。 我看不到您發布的代碼中會被這種結構差異弄亂的任何東西，但是我不認為這是偶然的。

即使您確實更改了結構以使用類而不是id（我認為這是一個不錯的選擇），也可能要弄清楚到底是什么導致了結構上的差異，否則可能會引起其他問題，上。